Javascript jQuery“this”的第一个孩子

jQuery first child of "this"

提问by macca1

I'm trying to pass "this" from a clicked span to a jQuery function that can then execute jQuery on that clicked element's first child. Can't seem to get it right...

我试图将“this”从单击的跨度传递给一个 jQuery 函数，然后该函数可以在该单击元素的第一个子元素上执行 jQuery。似乎无法正确理解...

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

Javascript:

Javascript：

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

How do I reference the :first-child of element?

如何引用 :first-child 元素？

回答by Shog9

If you want to apply a selector to the context provided by an existing jQuery set, try the find() function:

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

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

J?rn Schou-Rode noted that you probably only want to find the first direct descendantof the context element, hence the child selector(>). He also points outthat you could just as well use the children() function, which is very similar to find() but only searches one level deep in the hierarchy (which is all you need...):

J?rn Schou-Rode 指出，您可能只想找到上下文元素的第一个直接后代，因此是子选择器(>)。他还指出，你也可以使用children() 函数，它与 find() 非常相似，但只搜索层次结构中的一层（这就是你所需要的......）：

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

回答by J?rn Schou-Rode

Use the childrenfunctionwith the :firstselectorto get the singlefirst child of element:

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

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

回答by manikanta

I've added jsperftest to see the speed difference for different approaches to get the first child (total 1000+ children)

我添加了jsperf测试来查看不同方法获得第一个孩子的速度差异（总共 1000+ 个孩子）

given, notif = $('#foo')

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

jQuery ways:

jQuery 方法：

1. $(":first-child", notif)- 4,304 ops/sec - fastest
2. notif.children(":first")- 653 ops/sec - 85% slower
3. notif.children()[0]- 1,416 ops/sec - 67% slower

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

Native ways:

原生方式：

1. JavaScript native' ele.firstChild- 4,934,323ops/sec (all the above approaches are 100% slower compared to firstChild)
2. Native DOM ele from jQery: notif[0].firstChild- 4,913,658ops/sec

4. JavaScript native' ele.firstChild- 4,934,323ops/sec（与 相比，上述所有方法都慢了 100% firstChild）
5. 来自 jQery 的原生 DOM 元素：notif[0].firstChild- 4,913,658ops/sec

So, first 3 jQuery approaches are not recommended, at least for first-child (I doubt that would be the case with many other too). If you have a jQuery object and need to get the first-child, then get the native DOM elementfrom the jQuery object, using array reference [0](recommended)or .get(0)and use the ele.firstChild. This gives the same identical results as regular JavaScript usage.

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

all tests are done in Chrome Canary build v15.0.854.0

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

回答by Bishal Paudel

element.children().first();

Find all children and get first of them.

找到所有的孩子并获得第一个。

回答by theIV

Have you tried

你有没有尝试过

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

I think you want to set your element as a context for your search. There might be a better way to do this which some other jQuery guru will hop in here and throw out at you :)

我认为您想将元素设置为搜索的上下文。可能有更好的方法来做到这一点，其他一些 jQuery 大师会跳到这里然后扔给你:)

回答by Alnitak

I've just written a plugin which uses .firstElementChildif possible, and falls back to iterating over each individual node if necessary:

我刚刚编写了一个插件，.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);

It's not as fast as a pure DOM solution, but in jsperf testsunder Chrome 24 it was a couple of orders of magnitude faster than any other jQuery selector-based method.

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

回答by Yukulélé

you can use DOM

你可以使用 DOM

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

回答by Prabhakar Undurthi

This can be done with a simple magic like this:

这可以通过一个简单的魔法来完成：

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

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

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

回答by vishal gupta

please use it like this first thing give a class name to tag p like "myp"

请像这样使用它，首先给一个类名来标记 p 像“myp”

then on use the following code

然后使用以下代码

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

回答by Amit Rathod

If you want immediate first child you need

如果你想要第一个孩子，你需要

    $(element).first();

If you want particular first element in the dom from your element then use below

如果您想要元素中 dom 中的特定第一个元素，请在下面使用

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

try out : http://jsfiddle.net/vgGbc/2/

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