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

Question

我想获取当前/选定元素的下一个元素的值，例如这是一个列表：

<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这个“a”标签的值，并且这个“a”标签位于所选li之后的下一个li内。

我尝试使用以下jQuery代码，但是它获取到的结果为空。请帮忙解决。

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

- Abbasi

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，所以它的任何兄弟姐妹也都是li：

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>

- CertainPerformance

Answer 2

我认为您应该删除 "li a"，这样它就能工作了。以下是代码

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

这里有一个例子 jsfiddle

- dmcshehan