Jquery, select 具有相同 class 的所有锚点之后的第一个下一个元素
Jquery, select first next element after all anchors with same class
我想 select 在所有具有相同 class 的锚点之后的第一个下一个元素。
HTML
<a class="some_anchors">
</a>
<ul id="ul_1">
</ul>
...
<a class="some_anchors">
</a>
<ul id="ul_2">
</ul>
...
<a class="some_anchors">
</a>
<ul id="ul_3">
</ul>
...
<a class="some_anchors">
</a>
<ul id="ul_4">
</ul>
...
现在我想 select 所有 ul1,ul2,ul3,ul4
。
我在这里试过:
console.log($(".some_anchors").nextAll('ul:first'));
但它 returns ul1
而已。
如何解决这个问题?
您可以使用下一个兄弟选择器 +
直接在 class 元素之后定位 ul。
console.log(
$('.some_anchors + ul').get()
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="some_anchors">
</a>
<ul id="ul_1">
</ul>
<ul class="not-me">
</ul>
<a class="some_anchors">
</a>
<ul id="ul_2">
</ul>
<ul class="not-me">
</ul>
<a class="some_anchors">
</a>
<ul id="ul_3">
</ul>
<ul class="not-me">
</ul>
<a class="some_anchors">
</a>
<ul id="ul_4">
</ul>
<ul class="not-me">
</ul>
我觉得可能对你有帮助
$('li').each(function () {
if ($(this).hasClass("some_anchors")) {
$(this).show();
} else {
$(this).hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:500px;" class="siblings">
<ul>
<li>li (No Class)</li>
<li>li (No Class)</li>
<li>li (No Class)</li>
<li class="some_anchors">li (sibling with class name "some_anchors")</li>
<li>li (No Class)</li>
<li>li (No Class)</li>
</ul>
</div>
使用以下内容:
$(function() {
var lists = [];
$(".some_anchors").each(function(i, el) {
lists.push($(el).next());
});
console.log(lists);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="some_anchors">
</a>
<ul id="ul_1">
</ul>
<a class="some_anchors">
</a>
<ul id="ul_2">
</ul>
<a class="some_anchors">
</a>
<ul id="ul_3">
</ul>
<a class="some_anchors">
</a>
<ul id="ul_4">
</ul>
我想 select 在所有具有相同 class 的锚点之后的第一个下一个元素。
HTML
<a class="some_anchors">
</a>
<ul id="ul_1">
</ul>
...
<a class="some_anchors">
</a>
<ul id="ul_2">
</ul>
...
<a class="some_anchors">
</a>
<ul id="ul_3">
</ul>
...
<a class="some_anchors">
</a>
<ul id="ul_4">
</ul>
...
现在我想 select 所有 ul1,ul2,ul3,ul4
。
我在这里试过:
console.log($(".some_anchors").nextAll('ul:first'));
但它 returns ul1
而已。
如何解决这个问题?
您可以使用下一个兄弟选择器 +
直接在 class 元素之后定位 ul。
console.log(
$('.some_anchors + ul').get()
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="some_anchors">
</a>
<ul id="ul_1">
</ul>
<ul class="not-me">
</ul>
<a class="some_anchors">
</a>
<ul id="ul_2">
</ul>
<ul class="not-me">
</ul>
<a class="some_anchors">
</a>
<ul id="ul_3">
</ul>
<ul class="not-me">
</ul>
<a class="some_anchors">
</a>
<ul id="ul_4">
</ul>
<ul class="not-me">
</ul>
我觉得可能对你有帮助
$('li').each(function () {
if ($(this).hasClass("some_anchors")) {
$(this).show();
} else {
$(this).hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:500px;" class="siblings">
<ul>
<li>li (No Class)</li>
<li>li (No Class)</li>
<li>li (No Class)</li>
<li class="some_anchors">li (sibling with class name "some_anchors")</li>
<li>li (No Class)</li>
<li>li (No Class)</li>
</ul>
</div>
使用以下内容:
$(function() {
var lists = [];
$(".some_anchors").each(function(i, el) {
lists.push($(el).next());
});
console.log(lists);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="some_anchors">
</a>
<ul id="ul_1">
</ul>
<a class="some_anchors">
</a>
<ul id="ul_2">
</ul>
<a class="some_anchors">
</a>
<ul id="ul_3">
</ul>
<a class="some_anchors">
</a>
<ul id="ul_4">
</ul>