如果 span 包含精确文本，则将 class 添加到页面上的某个元素

Question

I have this code below.

    $("span.number").filter(function() {
    if (return ($(this).text() === 'PENDING')) {
        $(".property-thumb").addClass("pending");
    } 
    if (return ($(this).text() === 'PENDING INSPECTION')) {
        $(".property-thumb").addClass("pendinginspection");
    } 
});

Simply speaking, if "span.number" contains PENDING or PENDING INSPECTION, I want certain classes to be added to ".property-thumb". Why isn't this working?

Answer 1

You can't use the return keyword in an if statement.That is invalid syntax.
Instead of filter use an each loop and remove the return statement.

In the loop get the select the current element being looped over with $(this) , find the parent in which it is in with parents() (this is to create a context of which thumbnail it should select), and select the thumbnail element from the parent with find() .

Check with each item in $("span.number") if the text is either PENDING or PENDING INSPECTION with an if...else if statement and then add the classes accordingly to the thumbnail.

Tip: the $ before a variable can be a way to indicate that the value is a jQuery object so you know what kind of value it is and what you can do with it.

$("span.number").each(function() {
  var $this = $(this);
  var text = $this.text();
  var $property = $this.parents('.property');
  var $propertyThumb = $property.find('.property-thumb');
  if (text === 'PENDING') {
    $propertyThumb.addClass("pending");
  } else if (text === 'PENDING INSPECTION') {
    $propertyThumb.addClass("pendinginspection");
  } 
}