jquery - 为什么 :contains(text) 选择所有标签？

Question

标签： jquery

Answer 1

问题是因为您使用的:contains选择器没有元素上下文，因此 jQuery 会查看每个元素并检查它是否与:contains选择器匹配。

反过来，更高级别的元素，例如body，将与此匹配，因此然后将类应用于body并且所有子元素的文本颜色都会受到影响。

要解决此问题，请使:contains选择器更具体，例如a:contains：

$("a:contains('Canon'), a:contains('Nikon')").addClass("promoted");

$(function() {
  $(".showMore > a").click(function() {
    $(this).text("not all brand").css("background-color", "yellow");
    $("a:contains('Canon'), a:contains('Nikon')").addClass("promoted");
  });
});

var $elementDom = $("<div></div>");
$elementDom.text("createdDivElement");
$("body").append($elementDom);
var $textDom = $("<div>This is a text div</div>");
$("body").append($textDom);
var $attrDom = $("<div id='attr'>This is a attr div</div>");
$("body").append($attrDom);

#toggle li {
  display: inline-block;
}

a {
  text-decoration: none;
  color: #333;
}

.showMore {
  text-align: center;
}

.showMore a {
  border: 1px solid #333;
  padding: 5px;
}

.promoted {
  color: greenyellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="toggle">
  <li><a href="#">Canon</a><i>（30440） </i></li>
  <li><a href="#">Sony</a><i>（30440） </i></li>
  <li><a href="#">samsung</a><i>（30440） </i></li>
  <li><a href="#">Nikon</a><i>（30440） </i></li>
  <li><a href="#">Panasonnic</a><i>（30440） </i></li>
  <li><a href="#">other Brand</a><i>（30440） </i></li>
</ul>
<div class="showMore">
  <a href="#"><span>show all brand</span></a>
</div>

编辑- 或按照您的评论建议将类放在上面li也可以正常工作，您只需稍微修改 CSS rue 以使其具有足够的优先级来覆盖默认a样式：

$(function() {
  $(".showMore > a").click(function() {
    $(this).text("not all brand").css("background-color", "yellow");
    $("li:contains('Canon'), li:contains('Nikon')").addClass("promoted");
  });
});

var $elementDom = $("<div></div>");
$elementDom.text("createdDivElement");
$("body").append($elementDom);
var $textDom = $("<div>This is a text div</div>");
$("body").append($textDom);
var $attrDom = $("<div id='attr'>This is a attr div</div>");
$("body").append($attrDom);

#toggle li {
  display: inline-block;
}

a {
  text-decoration: none;
  color: #333;
}

.showMore {
  text-align: center;
}

.showMore a {
  border: 1px solid #333;
  padding: 5px;
}

.promoted,
li.promoted a {
  color: greenyellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="toggle">
  <li><a href="#">Canon</a><i>（30440） </i></li>
  <li><a href="#">Sony</a><i>（30440） </i></li>
  <li><a href="#">samsung</a><i>（30440） </i></li>
  <li><a href="#">Nikon</a><i>（30440） </i></li>
  <li><a href="#">Panasonnic</a><i>（30440） </i></li>
  <li><a href="#">other Brand</a><i>（30440） </i></li>
</ul>
<div class="showMore">
  <a href="#"><span>show all brand</span></a>
</div>