Select elements whose specific descendants' HTML contains a specific text?

Question

I want to select all div which has a cite descendant and that cite descendant's HTML contains some text. I have tried:

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

and this:

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

but it is not working. What is missing here?

That is, I want to select the 3rd div in the following 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: The thing I want to select is not $('div cite'). I want to select $('div'), where divs have a cite descendant and that cite descendant's contents contain some text.

@Sky Yes. I want to compare some text with the contents of the `cite` and select accordingly. — Utku, Aug 21 '16 at 19:30
@Utku You can try filter the div object, then check the text of cite under it. I'm using phone typing, so it's great if suggestion helps. — Sky, Aug 21 '16 at 19:50

dNitro · Answer 1 · 2016-08-21T20:27:23.477

5

Use :contains() selector:

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

Thanks to @JonSG:

The OP. has asked in the comments of a different answer how this might be done with just filter() without walking back up the tree with closest() or parent(). I'm not keen on this answer, but you might do:

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

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

Or:

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

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

edited Aug 21 '16 at 20:27

answered Aug 21 '16 at 19:34

dNitro

5,145
2
20
45

This selects the `cite` element. I want to select the `div` elements which have a `cite` descendant that contains some `text`. – Utku Aug 21 '16 at 19:40
2

This answer is close, but would need a **.closest("div")** or perhaps a **.parent()** – JonSG Aug 21 '16 at 19:42
@Utku, It now selects the `div`. – dNitro Aug 21 '16 at 19:48
@Utku, sure see my answer below that does essentially that. – JonSG Aug 21 '16 at 19:50
@JonSG But it still uses `closest()`. Is it possible to do it using only `filter()`s? – Utku Aug 21 '16 at 19:52
@Utku Yes but there is no need to use that, jQuery selectors already do that. It would be like using `getElementById` instead of `$('#...')`. Unless you are looking for a native JS solution. For the same functionality of `closest()` in native JS see [this answer](http://stackoverflow.com/questions/15329167/closest-ancestor-matching-selector-using-native-dom). – Spencer Wieczorek Aug 21 '16 at 19:52
@Utku, Yes, `$("div cite").filter(":contains('text')").closest("div");` – dNitro Aug 21 '16 at 19:54
@dNitro I meant, starting with `$('div').filter(...)`. Not with `$('div cite').filter(...)`. I.e, not using `closest()` at all. – Utku Aug 21 '16 at 19:56
1

Yes, I added a second example to my answer that uses **filter()** without **closest()**. If @dNitro adds it to his answer as a second example, I will delete my answer as his seem better overall. – JonSG Aug 21 '16 at 20:02
@Utku , Like this: `$("div").filter(function(index) { return /text/.test($(this).find("cite").html()); });` – dNitro Aug 21 '16 at 20:05
@JonSG, Added, Thanks. – dNitro Aug 21 '16 at 20:28

score 2 · Accepted Answer · answered Aug 21 '16 at 20:38

2

What about this?

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

answered Aug 21 '16 at 20:38

Mohamed Hamed

131
1
6

Sky · Answer 3 · 2016-08-21T19:36:42.897

0

You can try this:

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

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

});

edited Aug 21 '16 at 19:36

answered Aug 21 '16 at 19:34

Sky

7,343
8
31
42

*" HTML contains some `text`"* – Spencer Wieczorek Aug 21 '16 at 19:35

score 0 · Answer 4 · answered Aug 21 '16 at 19:37

0

To achieve expected result, use below option

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

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

answered Aug 21 '16 at 19:37

Naga Sai A

10,771
1
21
40

@Utku , this answer will get you all the text array between cite tags ,if cite tags are more than one – Naga Sai A Aug 21 '16 at 19:48

Select elements whose specific descendants' HTML contains a specific text?

4 Answers4