从上一个标记中获取下一个

Question

我有不同的<select>具有正确的id属性。每个<select>下都有一个<a>标记，没有正确的id或class。 我无法在id标记中添加<a>，因为它是由jQuery lib生成的。

示例：

<select class="foo" id="foo">
..
</select>
<a class="same" href="#">link</a>
<select class="bar" id="bar">
..
</select>
<a class="same" href="#">link</a>

有一种方法可以在特定<a>代码下获取第一个<select>代码吗？

Answer 1

如果锚标签将立即成为下一个兄弟，您可以使用.next()选择器：

 $('#foo').next();

否则，您需要将.nextAll()与.first()：

一起使用

 $('#foo').nextAll('a').first();

Answer 2

您好！

Vanilla JS解决方案：

一个选择器：

document.querySelector('select').nextElementSibling;

示例：

document.querySelector('select').nextElementSibling.style.color = 'red';

<select class="foo" id="foo">
  </select>
<a class="same" href="#">link</a>
<select class="bar" id="bar">
  </select>
<a class="same" href="#">link</a>

多重选择器：

document.querySelectorAll('select');

示例：

var arr = document.querySelectorAll('select');

for (var i = 0, length1 = arr.length; i < length1; i++) {
  arr[i].nextElementSibling.style.color = 'red';
}

<select class="foo" id="foo">
  </select>
<a class="same" href="#">link</a>
<select class="bar" id="bar">
  </select>
<a class="same" href="#">link</a>

Answer 3

尝试使用jQuery find。

$( "select" ).find( "a" );