jQuery问题:首先 - 如何解决

Question

我在html中有一个span标记,这<span>可以在页面上多次出现.

我想只选择第一个span标签.我是这样做的

var $myvar= $(".mydiv .indiv .myspan:first");

现在它的工作正常.

我认为我的代码将阻止浏览器遍历整个DOM,因为我正在使用:first,它将提高性能.我对么？

还有一个问题:

HTML:

<div class="mydiv">
    <div class="indiv">
        <span>myspan</span>
        <a href="#" class="anc1">a1</a>
        <a href="#" class="anc2">a2</a>
    </div>
    <table>
    ..................
    </table>
</div>

这个html有2个锚标签.我想在点击这个'a'标签时编写一个函数.为此我可以尝试类似$(".mydiv .indiv a")的东西.点击(函数(e)它会work.but假设,在HTMl中有一个相同的重复结构,所以它也可以用于重复设置'a'标签,我不想要.我只想要第一组'a'标签工作. 'a'标签是,onload 2 nd将处于隐藏状态,所以点击1,第2个将被显示,第一个将处于隐藏状态,并且点击第2个反向动作将发生,希望这个我已经说清楚自己了:-)

Answer 1

回答第一个问题

很抱歉告诉你但使用:first不会让你的选择更快.但这并不是浏览器的错误.这就是jQuery的工作原理.(顺便说一句.如果你的页面不是超大,例如几百个匹配,例如mydiv你的选择器看起来并不重要)

$(".mydiv .indiv .myspan:first");

1. jQuery首先选择DOM中具有类mydiv集的所有元素.
2. 它循环遍历在步骤1中找到的所有(!)元素,并查找所有具有类indiv集的后代.
3. 它循环遍历在步骤2中找到的所有(!)元素,并查找所有带有类myspan集的后代
4. 最后,它遍历在步骤3中找到的所有(!!!)元素,并确定它是否是第一个元素

特别是第4步不是你通常所期望的.因为只返回第一个找到的.myspan元素就足够了,但这不是jQuery使用的Sizzle选择器库的工作方式.

所以改进这个选择器的唯一方法就是使用

$(".mydiv .indiv .myspan").eq(0);

至少在第4步让你失去了循环

或者找到一个更简洁的选择器

回答第二个问题

如果我理解你正确你隐藏第二个<a>类似于此

$(".indiv > a").eq(1).hide();

然后以下应该做你想要的.首先隐藏第二个链接indiv.click仅将处理程序附加到前两个链接.哪个显示/隐藏对方.

$(document).ready(function(){
    $(".indiv").eq(0).children("a").eq(1).hide();
    $(".indiv").eq(0).children("a").each(function(i,e) {
        var x = $(e);
        if(i==0) {
            x.click(function(){
                x.hide();
                x.next().show(); 
            });
        } else {
            x.click(function(){
                x.hide();
                x.prev().show(); 
            });
        }
    }); 
});

您对问题的一些评论:

在<span>没有固定的一类myspan,但只包含文本myspan.class属性是否缺失或者您选择了错误.

假设你真的有这样的跨度<span class="myspan">....</span>.页面上是否有任何跨度也设置了此类但不应该被选中？如果没有,你可以重写你的选择器

$(".myspan").eq(0);