Question

我需要帮助。我被分配了从span元素中抓取一个单词的任务，然后将该单词分配给与类相同的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");
};  
});

然而，它不起作用。它将类“帽子”分配给类“产品”中的所有span元素。

使用时：

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

它可以工作并将'hat'类分配给同一个span元素。如果我这样做，它也有效。但我宁愿不要像这样有三行代码：

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() doc：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，你完成了！（/之后的{{1}}表示忽略大小写）

希望有所帮助

jQuery - 在span中查找单词并获取该单词并将该类添加到span元素中

3 个答案: