Question

expection：选择包含“ Conon”和“ 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>内的文本将全部变为黄色，但是只有<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>

为什么：contains（text）选择所有<i>标签？

1 个答案: