jQuery - 在跨度内查找一个单词并获取该单词并将类添加到跨度元素

Question

我需要帮助。我的任务是从 span 元素中提取一个单词，然后将该单词分配给与 class 相同的 span 元素。

我已经写了这段代码：

jQuery(".product span").each(function() {
if(jQuery("this:contains('hat')")) {
    jQuery(this).addClass("hat");
} else if (jQuery("this:contains('sunglasses')")) {
    jQuery(this).addClass("sunglasses");
} else {
    jQuery(this).addClass("vest");
};  
});

然而，它并不能正常工作。它将类“帽子”分配给类“产品”中的所有跨度元素。

使用时：

jQuery(".product span").each(function() {
if(jQuery("this:contains('hat')")) {
    jQuery(this).addClass("hat");
    };
});

它工作并将“帽子”类分配给同一个跨度元素。如果我这样做，它也有效。但我不希望有这样的三行代码：

jQuery(".product span:contains('hat')").addClass("hat");

我希望它在一个很好的 if 和 else 语句中，或者在可能的情况下使用解析的其他方式。

其他注意事项：我没有使用 jQuery 的快捷方式，因为它会与我有趣的其他库发生冲突。我也知道 var $js = jQuery.noConflict();方法。

非常感谢 Sushanth、Kevin 和 Karl 的大力响应！我希望我可以将两个答案都作为解决方案

Answer 1

jQuery("this:contains('hat')")

应该是

jQuery(this).filter(":contains('hat')")

this 在引号内时与元素或上下文不对应。它应该不带引号使用

jQuery(this) 而不是jQuery("this")

JS

jQuery(".product span").each(function() {
   // cache the jQuery object
   var $this = jQuery(this);
   // check the length if it returns anything
   if($this.filter(":contains('hat')").length) {
       $this.addClass("hat");
   } else if ($this.filter(":contains('sunglasses')").length) {
       $this.addClass("sunglasses");
   } else {
      $this.addClass("vest");
   }  
});

Check Fiddle

Answer 2

您的代码中有一些错误。

'this:contains("hat")' 将不起作用，它将搜索名为 this 的标记名并查看它是否包含“帽子”。

另外，如果要检查元素是否存在，则需要检查长度。 $('ANYThING') 永远是真的。

我建议这样做：

jQuery(".product span").each(function() {
    var $this = jQuery(this); //Caching this is optimal and less writing;
    if($this.is(":contains('hat')")) {
        jQuery(this).addClass("hat");
    } else if ($this.is(":contains('sunglasses')")) {
        $this.addClass("sunglasses");
    } else {
        $this.addClass("vest");
    };  
});

jQuery .is() 文档：http://api.jquery.com/is/

另外，:contains() 区分大小写，因此如果您的文字是“太阳镜”，它将不起作用。

Answer 3

你可以做到这一点，非常简单地使用 javascript String replace function

这是jsfiddle link 和下面的代码。

我还冒昧地重写了代码，使其更具可读性

// Create a closure, where $ is assigned to jQuery, so we dont have to write it
(function ($) {

  $(".product span").each(function() {
    findClass(this,"hat");
    findClass(this,"sunglasses");
  });

  function findClass(el, word) {
    var $el = $(el); //cache element

    $el.text().replace(word, function (match) {
      $el.addClass(match); //add the class to our element
      return match; //return the same word, so it's not replaced
    });
  }

})(window.jQuery);

replace 函数，有两个参数，第一个是字符串或我们正在匹配的RegExp，第二个是回调函数，它返回一个字符串来替换我们可以利用的匹配项

通过使用 RegExp，您还可以获得忽略大小写的好处。简单替换

"hat" 和 /hat/i 就完成了！ （/后面的i，表示忽略大小写）

希望对你有帮助