jQuery selector syntax for value of innerText

Question

I'm trying to add a click event to a tab that's generated by a Telerik ASP.NET widget. I've lifted a snip of the generated HTML into a static page for the purposes of experimentation:

<HTML>
<HEAD>
<TITLE>sandpit</TITLE>
<SCRIPT TYPE="text/javascript" SRC="jquery-1.9.1.js"></SCRIPT>
<SCRIPT>
$(document).ready(function(){
  var foo = $("span.rtsTxt");
  var bar = foo.filter("[innerText='More']")
  bar.on('click',function(){alert('click');});
  alert('ready');
});
</SCRIPT>
</HEAD>
<BODY>
  <ul>
    <li class="rtsLI">
      <a class="rtsLink rtsAfter">
        <span class="rtsOut">
          <span class="rtsIn">
            <span class="rtsTxt">Preferences</span>
          </span>
        </span>
      </a>
    </li>
    <li class="rtsLI">
      <a class="rtsLink rtsAfter">
        <span class="rtsOut">
          <span class="rtsIn">
            <span class="rtsTxt">More</span>
          </span>
        </span>
      </a>
    </li>
  </ul>
</BODY>
</HTML>

Debugging reveals that foo contains two items as expected. However, I can't figure out the syntax for selected the second one where the value of innerText is "More".

The question is simply how do I express innerText == 'More' either in a filter expression as shown or directly in the selector string?

Does this answer your question? [jQuery: find element by text](https://stackoverflow.com/questions/7321896/jquery-find-element-by-text) — Martien de Jong, Feb 12 '20 at 21:07

score 12 · Answer 1 · answered Mar 21 '13 at 03:24

12

One more approach to select an element which will return an object is to use filter like this:

$(".rtsTxt").filter(function() {
    return $(this).text() == "More";
});

fiddle

answered Mar 21 '13 at 03:24

RAS

3,375
15
24

+1 - I was going to suggest something like this (although I'm not saying I knew `filter` supported a callback like this), but then he selected my answer. – John S Mar 21 '13 at 03:37
I agree this is a better answer. I actually did know from just having read it in the docs that you could pass a function, but the significance of this was lost on me. Applying $() to *this* is clever and will, I think, get a lot of use from me. But you gave the first usable answer, John. In the controlled environment of the actual problem I faced, the loose match wasn't a problem. – Peter Wone Mar 26 '13 at 05:55

John S · Accepted Answer · 2013-03-21T03:21:44.780

10

Try the :contains selector:

var bar = foo.filter(":contains('More')")

Here's a jsfiddle demo showing it working.

WARNING: Although this will work for the html in the question, the :contains selector will match any element that contains the given text, not just the element whose text equals the given text. (As @RAS pointed out in a comment below.)

edited Mar 21 '13 at 03:21

answered Mar 21 '13 at 03:10

John S

21,212
8
46
56

2

Contains is not the same as Equals though. – RAS Mar 21 '13 at 03:14
Thats what I was thinking too, but my solution doesn't hit the nail on the question either as he wants it in the selector... – Geek Stocks Mar 21 '13 at 03:15
@RAS - You're right, it does literally mean contains, not equals. It may be sufficient depending on the case. – John S Mar 21 '13 at 03:19
Equals would be more robust but it's close enough for government work. – Peter Wone Mar 21 '13 at 03:25
And according to my copy of jQuery Pocket Ref, we shouldn't be putting the quotes in when we use this in a selector, although it appears to work anyhow. – Peter Wone Mar 21 '13 at 03:27
The example on the `:contains` selector documentation page shows the quotes like this. – John S Mar 21 '13 at 03:32

score 1 · Answer 3 · answered Mar 21 '13 at 03:11

1

Is this out of the question?

if ($("span.rtsTxt").html() == "More") {
   // do stuff
}

answered Mar 21 '13 at 03:11

Geek Stocks

2,010
3
27
43

1

It's not good because the element may contain some other elements. Though it's partially correct, so I won't downvote. – poxip Feb 06 '16 at 18:42

score 1 · Answer 4 · answered Aug 25 '16 at 10:46

1

jQuery.expr[":"].text = jQuery.expr.createPseudo(function(arg)
{
    return function( elem ) {
        return jQuery(elem).text().toLowerCase() == arg;
    };
});
$("span.rtsTxt:text('More')")

return only elements in which inner text equal 'More'

answered Aug 25 '16 at 10:46

Александр

11
2

This is the best answer P.S. the return statement should read return jQuery(elem).text().toLowerCase() == arg.toLowerCase(); – Martien de Jong Feb 12 '20 at 21:06

score 0 · Answer 5 · answered Mar 21 '13 at 03:18

0

Use the contains selector :

var bar = $("span.rtsTxt:contains('More')")
bar.on('click',function(){alert('click');});  
bar.html("yup")

Working example: http://jsfiddle.net/basarat/w38VE/4/

answered Mar 21 '13 at 03:18

basarat

261,912
58
460
511

jQuery selector syntax for value of innerText

5 Answers5