web-dev-qa-db-ja.com

"this"のjQueryの最初の子

クリックされたスパンからjQuery関数に "this"を渡して、クリックされた要素の最初の子に対してjQueryを実行することができます。うまくいかないようですが….

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

Javascript：

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

どのようにしてelementの：first-childを参照するのですか？

javascriptjqueryjquery-selectorscss-selectors
295
macca1

既存のjQueryセットによって提供されるコンテキストにセレクタを適用したい場合は、 find（）関数 を試してください。

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

JørnSchou-Rodeは、おそらくコンテキスト要素の最初の直接の子孫しか見つけたくないと言っていたので、 子セレクタ （>） 彼は も children（）関数 を使うことができると指摘しています。 find（）は、階層内の1レベルだけを検索します（これで十分です...）。

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

children関数 を :firstセレクター とともに使用して、 single elementの最初の子を取得します。

element.children(":first").toggleClass("redClass");
69
Jørn Schou-Rode

私は jsperf テストを追加しました。

与えられた、notif = $('#foo')

jQueryのやり方：

  1. $(":first-child", notif) - 4,304 ops/sec - 最速
  2. notif.children(":first") - 653 ops/sec - 85％遅い
  3. notif.children()[0] - 1,416 ops/sec - 67％遅い

ネイティブな方法：

  1. JavaScriptネイティブ 'ele.firstChild - 4,934,32 ops/sec（上記のすべてのアプローチはfirstChildと比較して100％遅くなります）
  2. JQeryからのネイティブDOM ele：notif[0].firstChild - 4,913,658 ops/sec

したがって、最初の3つのjQueryアプローチは、少なくとも1人目の子供にはお勧めできません（他の多くの人にも当てはまるとは思いません）。 jQueryオブジェクトがあり、first-childを取得する必要がある場合は、配列参照[0]（推奨）または.get(0)を使用してele.firstChildを使用し、jQueryオブジェクトからネイティブDOM要素を取得を取得します。これにより、通常のJavaScriptの使用と同じ結果が得られます。

すべてのテストはChrome Canary build v15.0.854.0で行われます

49
manikanta
element.children().first();

すべての子供を見つけて、最初にそれらを入手してください。

13
Bishal Paudel

やってみました

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

私はあなたがあなたの検索のためのコンテキストとしてあなたの要素を設定したいと思います。これを実行するためのより良い方法があるかもしれません。

9
theIV

私はちょうど可能であれば.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セレクタよりも数桁高速でしたベースの方法。

4
Alnitak

あなたはDOMを使用することができます

$(this).children().first()
// is equivalent to
$(this.firstChild)
2
Yukulélé

これは、次のような単純な魔法で実行できます。

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

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

2
Prabhakar

この最初のもののようにそれを使用してください "myp"のようにタグpにクラス名を与えます

その後、次のコードを使用する

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