如何在jQuery中游走元素？

Question

请帮助我遍历jquery中li标记下的元素。

    <li class="f-mobiles ">
     <div class="score rank-1">
       <div class="score-val">79</div>
       <div class="score-text">Spec Score</div>
    </div>
    <div class="simg">
      <a href="/mobiles/samsung-galaxy-j7-pro-p1101ner3zap" title="Samsung Galaxy J7 Pro">
      <img class="img" src="mobiles/1101ner3zap/s-1/samsung_galaxy_j7_pro.jpg" alt="Samsung Galaxy J7 Pro">
      </a>
   </div>
   <div class="info">
      <h2><a href="/mobiles/samsung-galaxy-j7-pro-p1101ner3zap">Samsung Galaxy J7 Pro</a></h2>
       <div class="product-features">
         <h3>Product Features:</h3>
         <ul class="pros">
            <li><i class="i-tick-check"></i>Dual Sim, VoLTE, 4G, 3G, Wi-Fi, NFC</li>
            <li><i class="i-tick-check"></i>Octa Core, 1.6 GHz Processor</li>
            <li><i class="i-tick-check"></i>3 GB RAM, 64 GB inbuilt</li>
            <li><i class="i-tick-check"></i>3600 mAh Battery</li>
         </ul>
         <ul class="cons">
            <li><i class="i-tick-check"></i>5.5 inches, 1080 x 1920 px display</li>
            <li><i class="i-tick-check"></i>13 MP Rear + 13 MP Front Camera</li>
            <li><i class="i-tick-check"></i>Memory Card Supported</li>
            <li><i class="i-tick-check"></i>Android, v7.0</li>
         </ul>
         <div class="clear"></div>
         <a href="/mobiles/samsung-galaxy-j7-pro-p1101ner3zap?tab=specifications" class="top-link" idx="2">See Full Specifications</a>
      </div>
   </div>

</li>

我需要来自div.info> h2和div.simg> imgsrc的信息以及类产品功能信息。 我该怎么做？

Answer 1

您只需要访问元素。 见下文。

 console.log($('.info > h2').html()); console.log($('.info > h2 > a').html()); console.log($('.simg > a > img').prop('src')); var features = $('.product-features .i-tick-check'); $.each(features,function(){ console.log($(this).closest('li')[0].innerText); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="f-mobiles "> <div class="score rank-1"> <div class="score-val">79</div> <div class="score-text">Spec Score</div> </div> <div class="simg"> <a href="/mobiles/samsung-galaxy-j7-pro-p1101ner3zap" title="Samsung Galaxy J7 Pro"> <img class="img" src="mobiles/1101ner3zap/s-1/samsung_galaxy_j7_pro.jpg" alt="Samsung Galaxy J7 Pro"> </a> </div> <div class="info"> <h2><a href="/mobiles/samsung-galaxy-j7-pro-p1101ner3zap">Samsung Galaxy J7 Pro</a></h2> <div class="product-features"> <h3>Product Features:</h3> <ul class="pros"> <li><i class="i-tick-check"></i>Dual Sim, VoLTE, 4G, 3G, Wi-Fi, NFC</li> <li><i class="i-tick-check"></i>Octa Core, 1.6 GHz Processor</li> <li><i class="i-tick-check"></i>3 GB RAM, 64 GB inbuilt</li> <li><i class="i-tick-check"></i>3600 mAh Battery</li> </ul> <ul class="cons"> <li><i class="i-tick-check"></i>5.5 inches, 1080 x 1920 px display</li> <li><i class="i-tick-check"></i>13 MP Rear + 13 MP Front Camera</li> <li><i class="i-tick-check"></i>Memory Card Supported</li> <li><i class="i-tick-check"></i>Android, v7.0</li> </ul> <div class="clear"></div> <a href="/mobiles/samsung-galaxy-j7-pro-p1101ner3zap?tab=specifications" class="top-link" idx="2">See Full Specifications</a> </div> </div> </li> </ul> 

Answer 2

您想要什么样的信息？

如果要使用jQuery访问元素，只需为类编写$('.element') ，为ID编写$('#element') 。

这是有关此的更多信息。