Как я могу использовать jQuery, чтобы выбрать элемент, который непосредственно содержит определенный текст?

Селектор jQuery :contains(text) выбирает элемент, если соответствующий текст появляется непосредственно внутри выбранного элемента, в любом из потомков этого элемента или их комбинации.
Я хочу выбрать элемент тогда и только тогда, когда соответствующий текст появляется непосредственно внутри выбранного элемента. Что я должен делать?

Например,

<ul>
    <li id="1">
       <a><img src="la.gif"></a>
       happy birthday 
       <ul><li>radom</li></ul>
    </li>
    <li id="2">
       <a><img src="la.gif"></a>
       sad 
       <ul><li>happy</li></ul>
    </li>
</ul>

Я хочу выбрать li который содержит слово "счастливый" (не выбирайте li если только его потомок содержит слово "счастливый"). Только тогда li#1 должен быть выбран.

Следующее НЕ делает то, что я хочу, потому что он выберет оба li#1 а также li#2:

$('li:contains("happy")');

2 ответа

Изменить: как из вашего обновленного кода, я думаю, что вам нужно использовать .contents() и проверить на nodeType чтобы убедиться, что это текстовый узел, а затем сравните его с нужным вам текстом.

$('ul li').contents().each( function () {
    if (this.nodeType == Node.TEXT_NODE && this.nodeValue.match(/happy/)) {
        $(this).closest('li').css('border', '1px solid red');
    }
});

или используя .filter(),

$('ul li').contents().filter( function () {
    if (this.nodeType == Node.TEXT_NODE && this.nodeValue.match(/happy/)) {
         return true;       
    }
}).closest('li').css('border', '1px solid red');

DEMO

Дайте мне знать, если это работает..


ul должен содержать только li теги.. как показано ниже,

<ul>
    <li id="1">happy</li>
    <li id="2">sad <div>happy</div></li>
</ul>

Предполагая, что ваш HTML такой, ниже приведен скрипт для получения первого списка,

$('ul li').filter (function () {
    if ($(this).text() == 'happy') return true;
});

.filter вернет li с текстом "счастливый".

DEMO

Попробуйте использовать .filter() для более конкретной проверки:

alert(
    $("ul").filter(function(){return $.trim(this.childNodes[0].nodeValue) === "happy"})[0].id
);​

Это проверяет nodeValue первого дочернего узла каждого ul чтобы увидеть, если это текстовый узел, который содержит "счастливый".

Другие вопросы по тегам