Почему: contains (text) выбрать все теги <i>?

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>. Почему?

jquery

26.06.2018 11:18

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

что, если li: contains ("Conon")? @RoryMcCrossan

— 27.06.2018 03:38

26.06.2018 11:24