尝试使用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”标签在选择了一个之后的下一个li。

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

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

Answer 1

如果下一个元素与选择器字符串.next不匹配，则传递给的选择器字符串将过滤掉下一个元素。但下一个元素是 a li，而不是 an 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，因为 is.selected将是 a 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>