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”）的东西。点击（function（e）但是它会起作用。但是，让我们说HTMl中有一个相同的重复结构，所以它也可以重复设置'a'标签，我不想要。我只想要第一组'a' 标签工作。 'a'标签的功能是，onload 2 nd将处于隐藏状态，所以点击1st，第二个将被显示，第一个将处于hide状态，点击第二个反向动作将发生，希望这次我明确表示： - ）

Answer 1

回答第一个问题

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

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

jQuery首先选择DOM中设置了类mydiv的所有元素。
它遍历在步骤1中找到的所有（！）元素，并找到所有设置了类indiv的后代。
它遍历在步骤2中找到的所有（！）元素，并找到所有类myspan的后代设置
最后它遍历在步骤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。是缺少类属性还是选择器错误。

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

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

jQuery问题：首先 - 如何解决

1 个答案:

回答第一个问题

回答第二个问题