jquery find element with html
<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>
