为什么：包含（文本）选择所有标签？

Question

例外：选择仅包含“Canon”和“Nikon”的元素

事实：不仅选择了我想要的元素，还选择了所有<i>标签，动态创建的元素。

困惑：它如何选择i？

这是我的代码：

$(function() {
  var $category = $("ul#toggle li:gt(6):not(:last)");
  $category.hide();
  $(".showMore > a").click(function() {
    $category.show();
    $(this).text("not all brand")
      .css("background-color", "yellow");
    $(":contains('Canon'),: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>

编辑：如果我将$(":contains('Canon'),:contains('Nikon')").addClass("promoted");改为$("li:contains('Canon'),li:contains('Nikon')").addClass("promoted");怎么办？我想<li>里面的文字都会变成greenyellow，但只有<i>标签内的文字才会改变。为什么？

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>