Question

我有一个类.tweet的项目列表，如果在.tweet的实例中找到某个术语，我想要该元素的背景。

问题是，当jQuery找到关键字的一个实例时，所有.tweet元素都会更改其背景。如何将其与具有找到的术语的元素隔离？

if($('.tweet').find('goat')){
    $('.tweet',this).css('background-color','#663399');
}

Answer 1

$('.tweet:contains("goat")')       // find tweets with the word goat within
  .css('background-color','#639'); // change only their background

我相信这就是你想要的。除非您正在寻找<goat>元素，否则.find不是您所需要的，而是:contains。而且因为你正在“链接”语句，它只会将css样式应用于匹配的元素。

并且，作为参考，上面的代码基本上是这样做的：

$('.tweet').each(function(){               // go through each .tweet
  var $tweet = $(this);                    // a reference to the single tweet
  if ($tweet.text().indexOf('goat') != -1){// check if the word "goat" is within
    $tweet.css('background-color','#639'); // change the background color
  }
});

Answer 2

如果this是您发现含有“山羊”的元素，那么您可以选择其关联的祖先“.tweet”元素并更改其颜色，如下所示：

$(this).closest('.tweet').css('background-color','#663399');

虽然.find() method的语法错误 - 您已将其设置为查找“goat”元素，而不是包含文本“goat”的元素。

此外，if语句的条件将始终为真（您的），因为.find()方法始终返回jQuery对象（即使有时该对象为空）。

如果您打算更改包含文本“goat”的任何“.tweet”元素的颜色，请尝试:contains() selector：

$(".tweet:contains(goat)").css('background-color','#663399');

// OR
var searchTerm = "goat";
$(".tweet:contains(" + searchTerm + ")").css('background-color','#663399');

Answer 3

您可以使用：contains选择器。这是一个演示：http://jsfiddle.net/imsky/a9X7b/

<ul>
    <li>Apple</li>
    <li>Broadcom</li>
    <li>Cisco</li>
</ul>


$(function(){
    $("ul li:contains('Cisco')").css("background","#eee");
});

Answer 4

$('.tweet',this).each(function(i,e){
   if($(e).find('goat'))
      $(e).css('background-color','#663399');
});

元素find（）时更改DIV CSS

4 个答案: