Выберите элемент на основе его значения html в jQuery - PullRequest
4 голосов
/ 28 февраля 2012

У меня есть следующая разметка: <ul class="list"> <li>4</li> <li>5</li> <li>6</li> </ul>

Как я могу выбрать элементы li со значением html 5 и 6 и добавить к ним класс?

Ответы [ 5 ]

10 голосов
/ 28 февраля 2012

Одной из опций является : содержит селектор ...

$("li:contains(5),li:contains(6)").addClass("myClassName");

Однако, поскольку он просто ищет этот текст и не соответствует всему содержимому, он также будет соответствовать <li><b>56</b></li>, <li><b>16</b></li> и т. Д.

Итак, вместо этого вам, вероятно, следует использовать .filter () примерно так:

$("li").filter(function () {
    var text = $(this).text();
    return text === "5" || text === "6"
}).addClass("myClassName");
4 голосов
/ 28 февраля 2012

Вы можете использовать .filter():

//setup object of the characters we want to match (we will be matching the keys, not values)
var whitelist = { 5 : 0, 6 : 0 };

//select all the list-item elements and filter them
var $selectedElements = $('.list').children().filter(function () {

    //returns true if the text of this element is one of the keys in the `whitelist` variable
    return ($(this).text() in whitelist);
});

Если вы вернете true, элемент будет сохранен в наборе элементов, если вы вернете false, он будет удален из набора.

Соответствует всему тексту элемента, он не просто проверяет, содержит ли текст символ.

Вот демонстрационная версия: http://jsfiddle.net/jasper/ndcFg/2/

3 голосов
/ 28 февраля 2012

использование :contains() Селектор

$("li:contains('5')")
0 голосов
/ 28 февраля 2012

Я подозреваю, что демонстрация слишком упрощена ... и что под "значением" вы подразумеваете текст

$('.list li').filter(function(){
    var txt=$(this).text();
    return txt==='4' || txt==='5';                      
}).addClass('someclass');
0 голосов
/ 28 февраля 2012
$("ul.list li").each(function(){
  if( $(this).text() == '5' || $(this).text() == '6' ) {
    $(this).addClass('theClass');
  }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...