JSFiddle - React, Tailwind, and code Playground

HTML

<div id='foo'>
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>
            <ul id='foo'>
                <li>Square</li>
                <li>Circle</li>
                <li>Triangle</li>
            </ul>
        </li>
        <li>The <i>quick <span style='color:brown'>brown</span></i> fox <b>jumped</b> <sup>over</sup> over the <u>lazy</u> dogs</li>
    </ol>
</div>

JavaScript

$.fn.ancestor = function(){

   var range = document.createRange(), ancestor;

   this.each(function(i){

      if(i === 0){
         range.setStart(this,0);
      }else{
         range.setStart(ancestor,0);
      };
      range.setEnd(this,0);
      ancestor = range.commonAncestorContainer;

   });

   return $(ancestor);

};

$('#foo li:contains(Square), #foo li:contains(Triangle)')
   .ancestor()
   .css('background','yellow');

$('i, span, b, sup, u')
   .ancestor()
   .css('background','cyan');

$('span, i')
   .ancestor()
   .css('border','1px solid green');

$('*').ancestor().css('border','1px solid red')