「this」のjQueryの最初の子

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

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

JavaScript：

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

要素の：first-childを参照するにはどうすればよいですか？

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

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

JørnSchou-Rodeさんは、おそらくコンテキスト要素の最初の直接の子孫、つまり子セレクター（>）を見つけたいだけだと指摘しました。彼はまた、find（）と非常によく似ているが、必要なのは階層の1つ深いレベルのみを検索するchildren（）関数を使用することもできると指摘しています。

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 ops / sec-85％遅い
3. notif.children()[0] -1,416オペレーション/秒-67％遅い

ネイティブの方法：

4. JavaScriptのネイティブ」ele.firstChild- 4934323の ops /秒（上記のすべてのアプローチはと比較して100％遅いですfirstChild）
5. jQeryからネイティブのDOM ELE：notif[0].firstChild- 4913658の ops /秒

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

すべてのテストはChrome Canaryビルド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)

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

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

リファレンス：http : //www.snoopcode.com/jquery/jquery-first-child-selector

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

次に、次のコードを使用します

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

あなたがすぐに最初の子供が欲しいならあなたは必要です

    $(element).first();

あなたの要素からdomの特定の最初の要素が必要な場合は、以下を使用してください

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

試してみてください：http : //jsfiddle.net/vgGbc/2/