如何在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')。

这里是关于这方面的更多信息。