divの下でjqueryのテーブル要素をトラバースする方法

Question

jQueryを使用しています。私は、通常のテーブル要素を横断中に問題が全くないが、私はここで立ち往生しています：

<div id="compare-prices" class="" style="display:block;"> 
    <table cellspacing="0"> 
     <tbody> 
      <tr class="stock_4 featured"> 
       <td class="store-logo"> 
        <div> 
         <a href="" title="Lenovo K6 Power 32 GB (Grey) 3GB RAM, Dual SIM 4G" target="_blank" rel="nofollow" data-esnm="Tata Cliq (200)"> 
          <img src="img/s/tatacliq.png" alt="Tata Cliq"> 
          <div class="variant"> 
           <table cellspacing="0"> 
            <tbody> 
             <tr class="stock_4"> 

              <td class="name"> 
               <a href="" title="Redmi Note 4 (Dark Grey, 64 GB)" target="_blank"> 
               </a> 
              </td> 
              <td class="price">Rs. 12,999 </td> 
             </tr> 
            </tbody> 
           </table> 
          </div> 
         </a> 
        </div> 
       </td> 
       <td class="price"> 
        <div>Rs. 9,085</div> 
       </td> 
      </tr> 
      <tr class="stock_4 featured"> 
       <td class="store-logo"> 
        <div> 
         <a href="" title="Lenovo K6 Power (Grey, 32 GB)" target="_blank" rel="nofollow" data-esnm="Flipkart (9)"> 
          <img src="img/s/flipkart.png" alt="Flipkart"> 
         </a> 
        </div> 
       </td> 
       <td> 
        <td class="price"> 
         <div>Rs. 9,999</div> 
        </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

次に、どのように私はメインテーブルからではないdiv > variantテーブルからの情報を解析することができます。同じtrクラスですか？

私はこのようにしようとしています：

$('.stock_4').closest('#compare-prices').each(function() { 
    console.log($(this).find('.price').text()); 
}); 

が、それはまた、div>のバリアントテーブルの価格を与えます。

Answer 1

use immediate child selector 
***>*** 

    $('#mainTable > tbody > tr').each(function(index , item) { 
     var itemsrc = $(item).find('img').attr("src") // will give src 
     var price = $(item).find('.price div').text() // will give price 

     console.log(itemsrc ,price); 
    }) 



Please have a look on the entire solution 

$(document).ready(function(){ 
 
    $('#mainTable > tbody > tr').each(function(index , item) { 
 
\t \t var itemsrc = $(item).find('img').attr("src") // will give src 
 
\t \t var price = $(item).find('.price div').text() // will give price 
 
\t \t 
 
\t \t console.log(itemsrc ,price); 
 
\t }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="compare-prices" class="" style="display:block;"> 
 
    <table id="mainTable" cellspacing="0" border="1"> 
 
     <tbody> 
 
      <tr class="stock_4 featured"> 
 
       <td class="store-logo"> 
 
        <div> 
 
         <a href="" title="Lenovo K6 Power 32 GB (Grey) 3GB RAM, Dual SIM 4G" target="_blank" rel="nofollow" data-esnm="Tata Cliq (200)"> 
 
          <img src="img/s/tatacliq.png" alt="Tata Cliq"> 
 
          <div class="variant"> 
 
           <table cellspacing="0"> 
 
            <tbody> 
 
             <tr class="stock_4"> 
 

 
              <td class="name"> 
 
               <a href="" title="Redmi Note 4 (Dark Grey, 64 GB)" target="_blank"> 
 
               </a> 
 
              </td> 
 
              <td class="price">Rs. 12,999 </td> 
 
             </tr> 
 
            </tbody> 
 
           </table> 
 
          </div> 
 
         </a> 
 
        </div> 
 
       </td> 
 
       <td class="price"> 
 
        <div>Rs. 9,085</div> 
 
       </td> 
 
      </tr> 
 
      <tr class="stock_4 featured"> 
 
       <td class="store-logo"> 
 
        <div> 
 
         <a href="" title="Lenovo K6 Power (Grey, 32 GB)" target="_blank" rel="nofollow" data-esnm="Flipkart (9)"> 
 
          <img src="img/s/flipkart.png" alt="Flipkart"> 
 
         </a> 
 
        </div> 
 
       </td> 
 
       <td> 
 
        <td class="price"> 
 
         <div>Rs. 9,999</div> 
 
        </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>