jQuery 问题 :first-how to solve

Question

我在 html 中有一个 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 个 anchor 标记。我想在单击此“a”标记时编写一个函数。为此，我可以尝试 $(".mydiv .indiv a").click(function(e)它会起作用。但是可以说， HTMl 中有相同的重复结构，因此它也适用于重复设置“a”标签，这是我不想要的。我只想要第一组“a”标签来工作。“a”标签的功能是，加载第二个将处于隐藏状态，因此单击第一个时，第二个将显示，第一个将处于隐藏状态，并且单击第二个时会发生相反的操作，希望这次我已经说清楚了:-)

Answer 1

回答第一个问题

我很遗憾地告诉你，但是使用 :first不会让你更快地做出选择。但这不是浏览器的错。这就是 jQuery 的工作原理。 (顺便说一句，如果您的页面不是很大，例如 mydiv 的数百个匹配项，那么您的选择器是什么样子并不重要)

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

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

尤其是第 4 步不是您通常所期望的。由于仅返回第一个找到的 .myspan element 就足够了，但这不是 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);