jQuery的“ this”的第一个孩子

2020/10/03 11:21 · javascript ·  · 0评论

我试图将“ this”从单击的范围传递到jQuery函数,然后可以在该单击的元素的第一个孩子上执行jQuery。似乎无法正确处理...

<p onclick="toggleSection($(this));"><span class="redClass"></span></p>

Javascript:

function toggleSection(element) {
  element.toggleClass("redClass");
}

如何引用element的:first-child?

如果要将选择器应用于现有jQuery集提供的上下文,请尝试使用find()函数

element.find(">:first-child").toggleClass("redClass");

JørnSchou-Rode指出,您可能只想查找context元素的第一个直接后代,因此需要选择子选择器(>)。他还指出,您也可以使用children()函数,该函数与find()非常相似,但只搜索层次结构中的一个级别(这是您需要的全部...):

element.children(":first").toggleClass("redClass");

使用children功能:first选择,以获得单个的第一个孩子element

element.children(":first").toggleClass("redClass");

我添加了jsperf测试,以了解获得第一个孩子(总计1000多个孩子)的不同方法的速度差异

给定的 notif = $('#foo')

jQuery方式:

  1. $(":first-child", notif) -4,304次操作/秒-最快
  2. notif.children(":first") -每秒653次操作-慢85%
  3. notif.children()[0] -1,416次操作/秒-慢67%

本机方式:

  1. JavaScript native'ele.firstChild - 4,934,323 ops / sec(与相比,上述所有方法均慢100%firstChild
  2. 从jQery本地DOM ELE:notif[0].firstChild- 4913658个操作/秒

因此,不建议使用前3种jQuery方法,至少对于第一个孩子(我怀疑其他许多情况也会如此)。如果您有jQuery对象并且需要获取第一个孩子,则可以使用数组引用[0] (推荐).get(0)使用来从jQuery对象获取本机DOM元素ele.firstChild这将产生与常规JavaScript使用相同的结果。

所有测试均在Chrome Canary build v15.0.854.0中完成

element.children().first();

找到所有孩子并首先获得他们。

你有没有尝试过

$(":first-child", element).toggleClass("redClass");

我认为您想将元素设置为搜索的上下文。可能有更好的方法来执行此操作,其他jQuery专家会跳到这里扔给您:)

我刚刚编写了一个插件,该插件.firstElementChild在可能的情况下使用,并在必要时回过头遍历每个单独的节点:

(function ($) {
    var useElementChild = ('firstElementChild' in document.createElement('div'));

    $.fn.firstChild = function () {
        return this.map(function() {
            if (useElementChild) {
                return this.firstElementChild;
            } else {
                var node = this.firstChild;
                while (node) {
                    if (node.type === 1) {
                        break;
                    }
                    node = node.nextSibling;
                }
                return node;
            }
        });
    };
})(jQuery);

它没有纯DOM解决方案快,但是在Chrome 24下的jsperf测试中,它比任何其他基于jQuery选择器的方法快几个数量级。

您可以使用DOM

$(this).children().first()
// is equivalent to
$(this.firstChild)

请像这样首先使用它:给类名称加上标签,例如“ myp”

然后使用以下代码

$(document).ready(function() {
    $(".myp").click(function() {
        $(this).children(":first").toggleClass("classname"); // this will access the span.
    })
})

这可以通过一个简单的魔术来完成,如下所示:

$(":first-child", element).toggleClass("redClass");

参考:http : //www.snoopcode.com/jquery/jquery-first-child-selector

如果您想要第一个孩子,您需要

    $(element).first();

如果要从元素中获取dom中的特定第一个元素,请在下面使用

    var spanElement = $(elementId).find(".redClass :first");
    $(spanElement).addClass("yourClassHere");

试用:http : //jsfiddle.net/vgGbc/2/

本文地址:http://javascript.askforanswer.com/jqueryde-thisdediyigehaizi.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!