jQuery .next(selector) 没有给我任何回报[重复]答案

【问题标题】：jQuery .next(selector) doesn't give me anything back [duplicate]jQuery .next(selector) 没有给我任何回报[重复]
【发布时间】：2021-08-25 15:16:46
【问题描述】：

我知道您可以在 jQuery 中使用 .next() 来获取下一个元素，但我也知道您可以提供一个参数，例如选择器，它会为您提供与给定参数匹配的下一个元素，但在我的情况它不起作用。示例：

HTML：

        <div id="divTEST"></div>
        <span id="spanTEST"></span>
        <a href="google.com">Google</a>

JS：

let div = $("div#divTEST");

console.log(div.next());
console.log(div.next("a"));

现在，问题不在于 div.next()，因为我得到了 'span' 元素，问题在于 div.next("a")，因为它没有给我任何回报。我做错了什么？

【问题讨论】：

"它会给你下一个匹配给定参数的元素" 不正确。如果您提供一个选择器，“它仅在匹配该选择器时检索下一个兄弟”。在您的示例中，锚点不是 div 的下一个元素，只有 span 是。考虑为 next 提供一个选择器作为过滤器。在您的示例中，div.next().next("a") 会起作用。更多api.jquery.com/next
这就是.next() 应该做的。如果你传递了一个选择器，但下一个兄弟不匹配，你什么也得不到。它不搜索兄弟元素链；它只查看紧邻的下一个兄弟。

标签： javascript html jquery selector next

【解决方案1】：

这缺乏对 jquery 的依赖，但如果你使用 querySelector，你可以使用 css 选择器来获取你想要的元素。 querySelector 只抓取第一个，而 querySelectorAll 将抓取任何匹配的。

console.log(document.querySelector('#divTEST ~ a'));

<div id="divTEST"></div>
<span id="spanTEST"></span>
<a href="google.com">Google</a>

【讨论】：

该问题的cmets中已经进行了解释。我不需要在这里复制和粘贴这些。我只是为操作提供了一条替代路径。

【解决方案2】：

如果你需要使用 jQuery，我做了一个函数来做你想做的事。它在原始元素之后获取与选择器匹配的元素。

let div = $("div#divTEST");

function getChildBySelector(elm, selector)
{
  const ch = elm.nextAll();
  
  let f = null;
  
  for (let i = 0; i < ch.length; i++)
  {
    const e = $(ch[i]);
    
    if (e.is(selector))
    {
      f = e;
      
      break;
    }
  }
  
  return f;
}

console.log(div.next());
console.log(div.next("a"));
console.log(getChildBySelector(div, 'a'));

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

<div id="divTEST"></div>
<span id="spanTEST"></span>
<a href="google.com">Google</a>

如果你对普通 JS 没问题，你可以使用@tstrand66's answer。

【讨论】：