javascript - 如何仅解析选定类的ul标签数据

Question

我有以下 HTML:

<div id="restautantsdiv">
   <ul id="restListings">

      <li>
         <div class="leftlable">
            <h4>Imax Vendor 01</h4>
            <p>Madhapur Area new</p>
            <p><b>Timings:</b> 09:40 AM - 06:40 PM</p>
            <label class="label-green label-wrap" style="display:none;">Close</label>
         </div>
         <div class="rightlable"><a class="addrest-btn icon-ok-3 addrest-btn-active"></a></div>
      </li>

      <li>
         <div class="leftlable">
            <h4>Imax Vendor 02</h4>
            <p>Miyapur Area</p>
            <p><b>Timings:</b> 01:34 PM - 07:34 PM</p>
            <label class="label-green label-wrap" style="display:none;">Close</label>
         </div>
         <div class="rightlable"><a class="addrest-btn icon-ok-3 addrest-btn-active"></a></div>
      </li>

       <li>
         <div class="leftlable">
            <h4>Imax Vendor 04</h4>
            <p>Madhapur Area </p>
            <p><b>Timings:</b> 09:40 AM - 06:40 PM</p>
            <label class="label-green label-wrap" style="display:none;">Close</label>
         </div>
         <div class="rightlable"><a class="addrest-btn icon-ok-3"></a></div>
      </li>


   </ul>
</div>

我如何获取 h4 文本，它的类是 addrest-btn-active 的 ul 标签存在于 restautantsdiv 下

你能告诉我如何获取这些数据吗？？

$('.restListings').find.each(function () {
    var labelname = $(this).find("h4").text();
    alert(labelname);
});

请看这是我的 fiddle

http://jsfiddle.net/hptd3070/

Answer 1

您可以使用以下内容:

Example Here

$('#restautantsdiv .addrest-btn-active').closest('#restListings > li').each(function () {
    var labelname = $(this).find("h4").text();
    alert(labelname);
});

它返回:

"Imax Vendor 01", "Imax Vendor 02"

首先选择 #restautantsdiv 中的所有 .addrest-btn-active 元素:

$('#restautantsdiv .addrest-btn-active')

然后找到最近的 li 父元素，它是 #restListings 的直接子元素:

.closest('#restListings > li')

从那里开始，它将遍历每个包含 .addrest-btn-active 的父 li 元素，并检索 h4 文本: $(this).find("h4").text().