JSFiddle - React, Tailwind, and code Playground

Finding root of embedded selectors

by tonytlwu

HTML

<!-- Used for finding root of selectors -->

<div>
  <p>asdas</p>
  <p>asdasd <strong class="target">asdsadas</strong> asdasd</p>
  <p>asdasd <strong class="target here">asdsadsadsa <span class="target">asdasd</span> asdasdasd</strong> asdasd</p>
  <ul>
    <li class="target">assdasdas</li>
    <li>assdasdas</li>
    <li class="target here">asdasdasd
      <ul>
        <li class="target">assdasdas</li>
        <li>assdasdas</li>
        <li class="target">assdasdas
          <ul>
            <li class="target">assdasdas</li>
            <li>assdasdas</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>asflkhasdfsdfhsda</li>
    <li class="target here">asdasdsad
      <ul>
        <li class="target">assdasdas</li>
      </ul>
    </li>
    <li>asdsadadsd
      <ul>
        <li class="target">assdasdas</li>
      </ul>
    </li>
  </ul>
</div>

CSS

.root {
  font-size: 2.5em;
}

.here {
  background: silver;
}

JavaScript

function findEmbedRoots() {
	var selector = '.target';
  var $roots = $(selector).filter(function () {
    return $(this).find(selector).length && !$(this).parents(selector).length;
  });
  
  // or
  
  // $roots = $(selector + ' ' + selector).filter(function () {
  //  return $(this).parents(selector).length === 1;
  // }).parents(selector);

	return Promise.resolve($roots);
}

findEmbedRoots().then(function ($roots){
	$roots.addClass('root');
});