Javascript 如何迭代叔父元素的子HTML元素

发布于03月08日

我有一个列表元素(<ul>).我想用jQuery的each()迭代输入元素的叔叔元素的所有<li>个子元素.

以下是我的代码:

let clname = "Hadiselect0";
let ar = ($('.dd-search .' + clname)[0].parentNode.parentNode + '+ ul >li');
ar.each(function () {
   console.log("ok");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="list">
   <div class="dd-search">
     <input id="txtSearchValue" autocomplete="off" class="dd-searchbox Hadiselect0" type="text">
   </div>

   <ul>
      <li class="option selected" data-value="0" data-display-text="" tabindex="0">please select</li>
      <li class="option " data-value="6565666" data-display-text="" tabindex="0">4623526615</li>
      <li class="option " data-value="6565666" data-display-text="" tabindex="0">4623526615</li>
   </ul>
</div>

此代码产生以下错误:

Ar.each不是一个函数

我怎么才能让它起作用呢？

推荐答案

使用jQuery .find()方法:

let clname = "Hadiselect0";

let ar = $('.dd-search .' + clname).parent().parent().find('ul > li');
ar.each(function () {
    console.log("ok", $(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="list">
   <div class="dd-search">
      <input id="txtSearchValue" autocomplete="off" class="dd-searchbox Hadiselect0" type="text">
   </div>

   <ul>
      <li class="option selected" data-value="0" data-display-text="" tabindex="0">please select</li>
      <li class="option " data-value="6565666" data-display-text="" tabindex="0">4623526615</li>
      <li class="option " data-value="6565666" data-display-text="" tabindex="0">4623526615</li>
   </ul>
</div>