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

我需要帮助。我的任务是从一个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");
};  
});

然而，它并没有发挥应有的作用。它将类“hat”分配给类“products”中的所有span元素

使用此选项时：

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

它工作并将“hat”类指定给同一跨度元素。如果我这样做，它也会起作用。但我不希望有三行这样的代码：

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

我希望它是一个很好的if-and-else语句，或者如果可能的话使用解析的另一种方式

其他注意事项：我没有使用jQuery的快捷方式，因为它会与其他库的I/O冲突。我还知道var$js=jQuery.noConflict（）；方法

非常感谢苏珊特、凯文和卡尔的热情回应！我希望我能把这两个答案都作为解决方案

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

应该是

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

当引号内与元素或上下文不对应时，此

。它应该在没有引号的情况下使用

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");
   }  
});

应该是

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

当引号内与元素或上下文不对应时，此

。它应该在没有引号的情况下使用

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");
   }  
});

---

您的代码中有一些错误

'this:contains（“hat”）将不起作用，它将搜索名为
this
的标记名，并查看它是否包含“hat”

此外，若要检查元素是否存在，则需要检查is长度<代码>$（'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（）

文档：

---

另外，

：contains（）

是区分大小写的，因此如果文本是“Sunglass”，它将不起作用。

代码中有一些错误

'this:contains（“hat”）将不起作用，它将搜索名为
this
的标记名，并查看它是否包含“hat”

此外，若要检查元素是否存在，则需要检查is长度<代码>$（'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（）

文档：

---

另外，

：contains（）

是区分大小写的，因此如果文本是“Sunglass”，它将不起作用。

您可以通过使用javascript实现这一点

下面是一个示例和代码

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

// 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，还可以忽略大小写。简单地替换

“hat”

和

/hat/i

就完成了！（在

/

之后的

i

表示忽略大小写）

---

希望它能帮助您实现这一点，非常简单地使用javascript

下面是一个示例和代码

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

// 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，还可以忽略大小写。简单地替换

“hat”

和

/hat/i

就完成了！（在

/

之后的

i

表示忽略大小写）

---

---

希望能有所帮助。

这不是你想要的吗？不，我想要一个很好的if and else语句。contains（）区分大小写。这可能是您的问题吗？另外，由于您的代码的结构方式，如果span包含hat和sunglases，则只会添加类“hat”。这不是您想要的吗？不，我想要一个很好的if和else语句。示例：contains（）区分大小写。这可能是您的问题吗？此外，由于您的代码的结构方式，如果跨度包含帽子和太阳镜，则只会添加类“帽子”。

$this.filter（“：contains（'hat'）”）

始终为真，您需要检查长度。感谢您的快速响应。当我添加额外的代码并再次检查是否正确键入时，此方法不起作用。它仍然将类“electric”分配给所有。产品跨度。@patorikkuv2它在小提琴中工作，你的代码与小提琴有什么不同？我的错，我错过了。长度，因为我看了小提琴链接：P。谢谢。这两种方法都是解决方案。你们太棒了！谢谢凯文和Sushanth@patorikkuv2.. 很高兴能够提供帮助：）

$this.filter（“：contains（'hat'）”）

始终为真，您需要检查长度。感谢您的快速响应。当我添加额外的代码并再次检查是否正确键入时，此方法不起作用。它仍然将类“electric”分配给所有。产品跨度。@patorikkuv2它在小提琴中工作，你的代码与小提琴有什么不同？我的错，我错过了。长度，因为我看了小提琴链接：P。谢谢。这两种方法都是解决方案。你们太棒了！谢谢凯文和Sushanth@patorikkuv2.. 很高兴能帮上忙：）非常感谢。这就是我问题的解决办法！我很接近。我从来不知道。是（）。我学到了一些新东西。再次感谢卡尔！区分大小写将是我将来需要考虑的事情！非常感谢。这就是我问题的解决办法！我很接近。我从来不知道。是（）。我学到了一些新东西。再次感谢卡尔！区分大小写将是我将来需要考虑的事情！啊，这也是一个非常棒的解决方案。多哥，谢谢你！啊，这也是一个非常棒的解决方案。多哥，谢谢你！