1

I need help. I have been assigned the task of grabbing a word out of a span element, and then assigning that word to the same span element as a class.

I have written this piece of code:

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

It does not work as it should however. It assigns the class 'hat' to all of the span elements within the class 'products'.

When using this:

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

It works and assigns the class of 'hat' to the same span element. It also works if I do it this way. But I would prefer not to have three lines of code like this:

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

I want it in a nice if and else statement or another way that uses parsing if possible.

Other Note: I am not using jQuery's shortcut because it will collide with other library's I amusing. I also know of the var $js = jQuery.noConflict(); method.

A BIG BIG thanks to Sushanth, Kevin and Karl for the great response! I wish I could put both answers as the solution

4

3 回答 3

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

检查小提琴

于 2013-07-24T20:26:57.450 回答
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()它是区分大小写的，所以如果你的文字是“太阳镜”，它将不起作用。

于 2013-07-24T20:29:41.327 回答
0

您可以实现这一点，非常简单地使用 javascript字符串替换功能

这是一个jsfiddle 链接和下面的代码。

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

// 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后面的/, 表示忽略大小写）

希望能帮助到你

于 2013-07-24T21:04:38.630 回答