選擇其特定后代的HTML包含特定文本的元素？

Question

我想選擇所有具有cite后代且該cite后代的HTML包含一些text div 。 我努力了：

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

和這個：

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

但它不起作用。 這里缺少什么？

也就是說，我想在以下HTML中選擇第3個div 。

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>

編輯：我要選擇的不是 $('div cite') 。 我想選擇$('div') ，其中div包含一個cite后代，該cite后代的內容包含一些文本。

Answer 1

使用:contains()選擇器：

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

感謝@JonSG：

OP。 在一個不同答案的注釋中已經問到，僅使用filter（）可以完成此操作，而無需使用mostest（）或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 2

那這個呢？

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

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