如何定位其中"<span><li><a>选择"类的""？

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。只有当上面的<a>标签具有selected类时，我才想通过jQuery添加display:block。我如何针对具有<a>类selected的<li>的<span> ?

像这样?

$("a.selected").parent() more code here... css('display', 'block');

Answer 1

保持简洁:

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

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

一个更复杂的DOM需要一个更复杂的选择器，但是对于这个场景，最广泛是最快的——并且有效。

使用上述语法，我的平均操作次数为23,000+ ops/秒，而使用gilly3

建议的$("li > a.selected + span").show();，我的平均操作次数仅为13.5k ops/秒

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

Answer 2

为什么是jQuery而不是CSS:

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

Answer 3

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

Answer 4

使用相邻兄弟选择器(+):

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

但是你不需要jQuery，只需要简单的css就可以了:

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

Answer 5

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