-1

ページにさまざまな Div 要素が表示されています。それらのいくつかは、互いに何らかの関係を持っています。たとえば、1 つが別のものに追加されます。

それらの多くを動的に追加、削除、更新する必要があるため、いつでもアクセスできるように、次の 2 つのオプションを考えました。

各divに一意のIDをgetElementById付けて、必要なときに実行します。

または、できるだけ少ない ID を指定し、親によって子 div にアクセスします。このために、私は次のようなことをしなければなりません:

$(parentDiv).attr("child", childDiv), or $(parentDiv).data("child", childDiv)"

そして子要素を取得します:

$(parentDiv).attr("child"), or $(parentDiv).data("child")

私の質問は、どちらがより効率的な方法であるかです（どちらがより高速で、どちらがより良い設計と見なされるかなどです..）。

4

3 に答える 3

2

または、できるだけ少ないIDを指定し、親が子divにアクセスします。このために、私は次のようなことをしなければなりません：$（parentDiv）.attr（ "child"、childDiv）、または$（parentDiv）.data（ "child"、childDiv） "

-$（parentDiv）.attr（ "child"）または$（parentDiv）.data（ "child"）で子要素を取得します

これは、子要素または子孫要素にアクセスする方法ではありません。children、findなどを使用します。

私の質問は、どちらがより効率的な方法であるかです（これはより高速で、より良い設計と見なされます。など）。

それらはおそらく別々の質問です。によって要素よりもはるかに効率的に要素にアクセスできる可能性は低いですが、構造が健全であれば、要素idを見つけることと構造的に見つけることの効率の違いはそれほど重要ではありません。ナビゲートできるいくつかのアンカーポイントで十分です。

構造に関する詳細情報がなければ、確かな例を提供するのは難しいですが、セルのクリックに応答したいテーブルのかなり古典的なケースを考えてみましょう。

<table>
<tbody id="foo">
<tr data-info="first row">
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr data-info="second row">
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>

他のセルのクリックに基づいてセルを更新することはかなり一般的です。これを行うには、テーブルのID、イベント委任、および構造トラバーサルメソッドを使用します。

$("#foo").on('click', 'td', function() {
    // `this` is the cell that was clicked. If I want row-level data, I'd use:
    alert("This row's info is " + $(this).closest('tr').data('info'));

    // Or maybe I want the last cell in the row
    alert("Last cell's text: " + $(this).siblings().last().text());
});
于 2013-02-11T14:21:34.100 に答える
0

より良い設計アプローチのために、ID を持つ動的要素を作成しないようにしてください。動的に追加された要素に必要な css クラスを作成するだけであれば、通常ははるかに単純で (デバッグがはるかに簡単です)。

ID を動的に作成する場合、指定された ID がページ上で一意であることを常に確認する必要があります。これにより、重要なページが複雑になります。これに加えて、IE と Chrome では一意でない ID の扱いが異なり (ブラウザのバージョンによっても異なります)、デバッグが非常にイライラします。

于 2013-02-11T14:24:20.220 に答える
0

要素にクラス名を付けます。このようにして要素をグループ化し、jQuery を使用してそれらに直接アクセスできます。したがって、parent1 の下にあるものはすべて、parent1 クラスなどを提供します

 $('.parent1').remove();  // will remove all parent1 classes
于 2013-02-11T14:24:41.340 に答える