如何用jQuery遍历输入元素的叔叔元素下的子<li>元素

我需要用jQuery的each()方法遍历输入元素的叔叔元素下的所有<li>子元素，以下是我的代码：

原JS代码 #

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

原HTML代码 #

<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 is not a function

解决方法 #

错误原因 #

你的代码里，$('.dd-search .' + clname)[0]获取的是原生DOM元素，后续的parentNode.parentNode也是原生DOM对象，你把它和字符串'+ ul >li'拼接后，得到的是一个普通字符串（类似[object HTMLDivElement]+ ul >li），而非jQuery对象，自然无法调用jQuery的each()方法。

修复后的代码 #

你需要保持jQuery对象的链式调用，或者将原生DOM转为jQuery对象后再操作，以下是两种可行方案：

方案一：全程使用jQuery链式调用

let clname = "Hadiselect0";
// 找到输入框的jQuery对象 → 向上找父级的父级 → 找下一个兄弟元素ul → 遍历内部的li
let $targetLis = $('.dd-search .' + clname).parent().parent().next('ul').children('li');
$targetLis.each(function () {
   console.log("ok");
   // 可额外获取当前li的文本内容
   console.log($(this).text());
});

方案二：原生DOM转jQuery对象后操作

let clname = "Hadiselect0";
// 获取原生输入框元素
let inputDom = $('.dd-search .' + clname)[0];
// 将父级的父级转为jQuery对象，再查找目标ul和li
let $targetLis = $(inputDom.parentNode.parentNode).next('ul').find('li');
$targetLis.each(function () {
   console.log("ok");
});

两种方案都能正确获取目标<li>元素并执行each()遍历，核心是确保最终操作的是jQuery对象而非原生DOM或字符串。

内容的提问来源于stack exchange，提问作者kian