尝试使用 jQuery 获取当前所选元素的下一个元素的值

Question

我正在尝试获取 current/selected 元素的下一个元素的值，例如这里是列表

<ul>
<li class="abc selected"><a href="www.test.com">test</a> </li>
<li class="abc"><a href="www.test1.com">test1</a> </li>
<li class="abc"><a href="www.test2.com">test2</a> </li>
</ul>

从上面的代码中，我试图获取紧挨着所选 li 的 "a" 标签的值，在上述情况下，我尝试获取标签的值，即 test1 和 this "a" 标签在所选标签之后的下一里内。

我尝试使用下面的 jQuery，但它获取的是空结果。任何帮助

var linktext1= jQuery(".selected").next("li a").text();
alert (linktext1);

Answer 1

传递给.next的选择器字符串将过滤掉下一个与选择器字符串不匹配的元素。但是下一个元素是 li，而不是 a，所以 .next('li a') 将不起作用。

改用.next("li").find('a')：

var linktext1 = jQuery(".selected").next("li").find('a').text();
console.log(linktext1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="abc selected"><a href="www.test.com">test</a> </li>
  <li class="abc"><a href="www.test1.com">test1</a> </li>
  <li class="abc"><a href="www.test2.com">test2</a> </li>
</ul>

不过，在这种特殊情况下，不需要将 li 选择器传递给 .next，因为 .selected 将成为 li，所以它的任何兄弟姐妹也将是 lis:

var linktext1 = jQuery(".selected").next().find('a').text();
console.log(linktext1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="abc selected"><a href="www.test.com">test</a> </li>
  <li class="abc"><a href="www.test1.com">test1</a> </li>
  <li class="abc"><a href="www.test2.com">test2</a> </li>
</ul>

Answer 2

我认为你应该删除 "li a" 并且它有效。下面是代码

var linktext1= jQuery(".selected").next().text();
alert (linktext1);

这里是例子jsfiddle

尝试使用 jQuery 获取当前所选元素的下一个元素的值

Trying to get the value of very next element of the current selected element using jQuery

javascript

jquery

jquery-ui