选择其特定后代的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中选择第3个.

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'),其中divs有cite后代,cite后代的内容包含一些文本.

Answer 1

使用:contains()选择器:

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

感谢@JonSG:

OP.已经在评论中提出了一个不同的答案,如何只使用filter()来完成这项工作,而无需使用nearest()或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");