باستخدام jQuery للاستيلاء على المحتوى

Question

أحاول سحب متغيرات زوجين من الكتلة التالية من HTML. إذا كنت لا تمانع في المساعدة ، فسيكون موضع تقدير كبير!

<div id="services">
    <div id="service1">
      <div class="left">
        <img alt="Service Picture" src="/images/service-picture.jpg" />
        <h2 class="serviceHeading">A Beautiful Header</h2>
        <p>Some nice text.</p>
      </div>
      <div class="right">
        <p>Some more nice text.</p>
      </div>
      <br class="spacer"/>
      <a class="topButton" href="#" title="Back to Top">Back to Top</a>
    </div>
    <div id="service2">
      <div class="left">
        <img alt="Service Picture" src="/images/service-picture-2.jpg" />
        <h2 class="serviceHeading">Another Beautiful Header</h2>
        <p>Some even nicer text.</p>
      </div>
      <div class="right">
        <p>Some even more nicer text.</p>
      </div>
      <br class="spacer"/>
      <a class="topButton" href="#" title="Back to Top">Back to Top</a>
    </div>
  </div>

أود أن تتجاوز الوظيفة #services والحصول على SRC قيم لكل img, ، وكذلك المحتوى من كل <h2>.

هذا ما لدي حتى الآن...

 $("#services div").each(function () {
   var $this_html = $(this).html();
   var h2_text = "";
   var img_src = "";
 });

Answer 1

هذا يجب أن يعمل. من المهم استخدام المحدد #services > div لأن كل خدمة Div لديها Div طفل. بدون محدد الطفل ، ستحصل على كل خدمة مرتين.

$("#services > div").each(function () {
   var imgSrc= $(this).find('img').attr('src');
   var headerContent = $(this).find('h2').text();
});

Answer 2

ألق نظرة على وظيفة البحث

http://docs.jquery.com/traversing/find

داخل كل وظيفة ، يمكنك العثور على ما تحتاجه مثل هذا:

$(this).find('h2').text();
$(this).find('img').attr('src');

Answer 3

انت قريب.

$("#services div").each(function () {
   var img_src= $(this).find('img').attr('src');
   var h2_text = $(this).find('h2').text();
 });

أعط ذلك لقطة.

Answer 4

أعتقد أنك تريد هذا:

$("#services div.left").each(function () {
   var $this_html = $(this).html(); // don't know if you still want this
   var h2_text = $(this).find(">h2").text();
   var img_src = $(this).find(">img").attr("src");
 });

• div.left تمت إضافته حتى تحصل دائمًا على div مع العناصر الصحيحة.
• نحن نستخدم > في ال find وظيفة للاستيلاء على الأطفال (أكثر كفاءة).
• مسح ال $this_html خط إذا لم تكن بحاجة إلى HTML بأكمله بالإضافة إلى H2/IMG ، فإن الأشياء الأخيرة لا تعتمد عليها.