Выберите элементы, чьи конкретные HTML-файлы потомков содержат определенный текст?

Question

Я хочу выбрать все div, у которого есть потомок cite, и что cite HTML-код потомка содержит text. Я пробовал:

$('div') 
    .filter('cite') 
    .filter(function() { 
       return $(this).html().match('text'); 
    }) 

и это:

$('div') 
    .filter('div cite') 
    .filter(function() { 
       return $(this).html().match('text'); 
    }) 

, но он не работает. Что здесь отсутствует?

То есть, я хочу выбрать третий div в следующем HTML-коде.

HTML:

<div id="abcd">text1 text2</div> 
<div id="abccd">text1 text2</div> 
<div id="abcccd"> 
    <cite><b>text1</b>text2</cite> 
</div> 
<div id="abd">text1 text2</div> 

EDIT: То, что я хочу, чтобы выбрать это не$('div cite'). Я хочу выбрать $('div'), где div s имеет потомка cite и что cite Содержание потомка содержит некоторый текст.

Answer 1

Что об этом?

$("div").has("cite:contains('text')"); 

Answer 2

Используйте :contains() селектор:

$("div").find("cite:contains('text')").closest("div"); 

Благодаря @JonSG:

ОП. спросил в комментариях другого ответа, как это может сделать с помощью только фильтра(), не возвращаясь к дереву с помощью closeest() или parent(). Я не заинтересован в этом ответе, но вы можете сделать:

var target = $("div").filter(function() { 
    return $(this).find("cite:contains('text')").length !== 0; 
}); 

$(target).css("background-color", "coral"); 

Или:

var target = $("div").filter(function() { 
    return /text/.test($(this).find("cite").html()); 
}); 

$(target).css("background-color", "tomato"); 

Answer 3

Вы можете попробовать это:

$("div cite").each(function() {

 ` // $(this).text() get the text of cite` 

});

Answer 4

Для достижения ожидаемого результата, используйте ниже вариант

$("cite").each(function(index) { 
    console.log($(this).text()); 
}); 

http://codepen.io/nagasai/pen/xONxbZ