0

次のことを行うための、より簡潔でおそらくよりjQuery-eの方法を探しています。lbldiv であるオブジェクトがあります。div 内に含まれているのは、オブジェクトのfirstNameandlastNameプロパティである span タグです。lblしたがって、これまでのところ、次の HTML があります。

<div class="label">
        <span class="firstName">John</span>
         <span class="lastName">Doe</span>
</div>

次のフィドルを検討してくださいhttp://jsfiddle.net/VfErV/

 $('#btnSubmit').click(function ()
            {
                var lbl = $('<div>').addClass('label');
                //I need to be able to access the child elements of the parent div
                //via the dot operator
                firstName = $('<span>').text('test1').addClass('firstName');
                lastName = $('<span>').text('test2').addClass('lastName');
                lbl.append(firstName);
                lbl.append(lastName);
                lbl.firstName = firstName;
                lbl.lastName = lastName;

                $('#page').append(lbl);
                console.log(lbl.firstName.text());

                //span tag is never added to the div
                var lbl2 = $('<div>').addClass('label');
                lbl2.firstName = $('<span>').text('test2').addClass('firstName');
                $('#page').append(lbl2);
            });

動作についてはフィドルを参照してください。親 div コンテナーの子オブジェクトのフォント サイズ、境界線などを制御できる必要があり、lbl通常の DOM 要素としてページに表示されます。最初の lbl コントロールがページに追加されるまでのすべての JS が機能します。しかし、これは私には不格好に見えます。DOM要素の子要素を親オブジェクトのプロパティにするより簡単/簡潔にするより良い方法はありますか?

4

1 に答える 1

2

これを行うには、より多くのjQueryの方法を求めました。構造を作成する方法は次のとおりです。

$('#btnSubmit').click(function () {
    var lbl = $('<div>').addClass('label');
    lbl.html('<span class="firstName">test1</span><span class="lastName">test2</span>');
    $('#page').append(lbl);

    // Then, to retrieve that data, you can just do something like this
    console.log(lbl.find(".firstName").text());
});

次に、特定のラベル div から firstName を取得したいときはいつでも、.find("firstName")そのオブジェクトを取得してからそのテキストを取得するために使用します。

通常、ベスト プラクティスは、DOM の構造を使用し、すべてにアクセスするための新しい重複した方法を作成するのではなく、DOM で必要なものを見つけるだけです。私たちが行っていることの 99% において、DOM を介して物事にアクセスすることは非常に高速であり、データにアクセスするための別の方法を作成したり複製したりする必要はありません。また、jQuery を使用すると、探しているものを識別するのに十分な ID またはクラス マーカーがある限り、DOM 内のものを簡単に見つけることができます。

于 2013-09-18T17:58:29.740 に答える