Question

<li>
  <a class="selected" href="#">One</a>
  <span class="tab-arrow"></span>
</li>
<li>
  <a href="#">Two</a>
  <span class="tab-arrow"></span>
</li>

span.tab-arrow设置为display:none。我想通过jQuery添加display:block仅当其上方的<a>标记具有selected类时。如何定位<span>中<li>类<a>的{{1}}？

这样的东西？

selected

Answer 1

保持简单：

$('.selected').next().show();

根据您提供的DOM结构，这应该是最快的解决方案，因为JQuery将使用getElementsByClassName()。

更复杂的DOM需要更复杂的选择器，但对于这种情况，最广泛的是最快的 - 并且有效。

我使用上述语法平均每秒23,000次操作/秒，而gilly3建议使用$("li > a.selected + span").show();只有13.5k操作/秒

基准：http://jsperf.com/selector-variation

Answer 2

为什么CSS可以做jQuery：

.selected + .tab-arrow { display:block; }

Answer 3

使用adjacent sibling selector（+）：

$("li > a.selected + span").show();

但是你不需要jQuery，只需普通的css就能正常工作：

.tab-arrow
{
    display: none;
}
a.selected + .tab-arrow
{
    display: inline;
}

Answer 4

或类似$("a.selected").siblings("span").css("display", "block");

Answer 5

$('a.selected').parent().find('span.tab-arrow').show();

如何针对具有“<a>` class `selected` in it?</a> </li> </span>的`<li>`的`<span>`？

5 个答案: