JSFiddle - React, Tailwind, and code Playground

find jquery element by matched children text

by abubelinha

HTML

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<li><a href="https://stackoverflow.com/questions/306583/how-to-get-the-children-of-the-this-selector" target=_blank>https://stackoverflow.com/questions/306583/how-to-get-the-children-of-the-this-selector</a></li>
<li><a href="https://stackoverflow.com/questions/38101151/jquery-select-the-parent-based-on-child-containing-exact-text/38101926#38101926" target=_blank>https://stackoverflow.com/questions/38101151/jquery-select-the-parent-based-on-child-containing-exact-text/38101926#38101926</a></li>

<br>
    <span class="parent" id="1">
    	<p>This is SPAN 1</p><p>..</p>
    	<span>text</span>
    	<a> ... </a> and it finishes here.
    </span>
    <span class="parent" id="2">This is SPAN 2 ... 
    	<span>some text</span>
    	<a>...</a> and it finishes here.
    </span>
    ....
    <span class="parent" id="n">This is SPAN n
    	<p>...</p>
    	<span>other</span> ... and it finishes here.
    </span>
    <br><p>
   The problem is to find children() with many nesting leveles.
    </p>

JavaScript

var current = "text";
var test = $('.parent').children().filter(function() {
  return $(this).text() === current;
}).parent();

test.css('color', 'red');