jQuery find element by text

Question

Can anyone tell me if it s possible to find an element based on its content rather than by an id or class   I am attempting to find elements that don t have distinct classes or id s   Then I then need to find that element s parent

User · Answer

The following jQuery selects div nodes that contain text but have no children, which are the leaf nodes of the DOM tree.

_x000D_

$('div:contains("test"):not(:has(*))').css('background-color', 'red');

_x000D_

<div>div1_x000D_
<div>This is a test, nested in div1</div>_x000D_
<div>Nested in div1<div>_x000D_
</div>_x000D_
<div>div2 test_x000D_
<div>This is another test, nested in div2</div>_x000D_
<div>Nested in div2</div>_x000D_
</div>_x000D_
<div>_x000D_
div3_x000D_
</div>_x000D_
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

_x000D_

User · Answer

Yes  use the jQuery contains selector

User · Answer

Best way in my opinion     fn findByContentText   function  text        return   this  contents   filter function              return   this  text   trim      text trim

User · Answer

You can use the  contains selector to get elements based on their content   Demo here   x000D   x000D     div contains  test     css  background-color    red    x000D   lt div gt This is a test lt  div gt  x000D   lt div gt Another Div lt  div gt  x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Rocket s answer doesn t work    lt div gt hhhhhh  lt div gt This is a test lt  div gt   lt div gt Another Div lt  div gt   lt  div gt    I simply modified his DEMO here and you can see the root DOM is selected      div contains  test   last   css  background-color    red      add   last  selector in the code to fix this

User · Answer

Fellas  I know this is old but hey I ve this solution which I think works better than all  First and foremost overcomes the Case Sensitivity that the jquery  contains   is shipped with   var text    text    var search       ul li label    filter  function          return    this   text   toLowerCase   indexOf  text toLowerCase      gt   0     first       Returns the first element that matches the text  You can return the last one with  last     Hope someone in the near future finds it helpful

User · Answer

In jQuery documentation it says      The matching text can appear directly within the selected element  in   any of that element s descendants  or a combination   Therefore it is not enough that you use  contains   selector  you also need to check if the text you search for is the direct content of the element you are targeting for  something like that   function findElementByText text        var jSpot      b contains     text                         filter function     return   this  children   length     0                     parent        because you asked the parent of that element      return jSpot

[jquery] jQuery: find element by text

Examples related to jquery

Examples related to text

Examples related to find