title: jquery find element with html
body: <p>Let's say I have some html that looks like this:</p>
  
  <pre><code>&lt;div id="TheTable"&gt;
  
    &lt;div class="TheRow"&gt;
      &lt;div class="TheID"&gt;123&lt;/div&gt;
      &lt;div class="TheQuantity"&gt;2&lt;/div&gt;
      &lt;div class="TheName"&gt;test1&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="TheRow"&gt;
      &lt;div class="TheID"&gt;456&lt;/div&gt;
      &lt;div class="TheQuantity"&gt;3&lt;/div&gt;
      &lt;div class="TheName"&gt;test2&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And let's say I have 1,000 rows.</p>
  
  <p>I'm writing a function that takes in an ID as parameter and that searches for the TheQuantity and TheName values in the html. Something like this:</p>
  
  <pre><code>function GetData(TheID) {
  
     var TheIndex = $('#TheTable').find("the index of the row that contains TheID")
  
     TheQuantity = $('#TheTable .TheQuantity').eq(TheIndex);
     TheName = $('#TheTable .TheName').eq(TheIndex);
  
  }
  </code></pre>
  
  <p>I could loop through each .TheID and return the index like this:</p>
  
  <pre><code>   $('#TheTable .TheRow').each( function () {
         if ($(this).html() === TheID) { return $(this).index(); }
     });
  </code></pre>
  
  <p>but I'm wondering if there's a more direct way of doing it. Let me know if you have some suggestions.</p>
  
  <p>Thanks.</p>