5

次の要件があるとします。そのような要素が存在する場合eは id を持つ要素に要素を追加し、そうでない場合は本文に追加します。"x"e

DOM レベル 0 では、次のように記述できます。

var parent = document.getElementById("x") || document.body;
parent.appendChild(e);

jQuery では、以下は機能しません。

var parent = $("#x") || $("body");
parent.append(e);

id を持つ要素がx存在しない場合、最初の分離は空の jquery オブジェクトを返します。これは偽ではなく真であるため、appendは何もしません。ただし、次のように書くことができます。

var parent = $("#x")[0] || $("body")[0];
parent.appendChild(e);

ただし、jQuery オブジェクトのインデックスを作成すると HTMLElements に戻るため、このソリューションはやや扱いにくいため、appendChild代わりにappend. これは機能しますが、このレベルの混合が適切なのか、それとも設計が悪いことを示しているのか疑問に思っています。

使用方法があるかもしれfirst()ませんか？おそらく、最初の要素が id x の div で、2 番目の要素が body である配列である jQuery オブジェクトを作成できます。要素配列を受け取る jQuery コンストラクター形式でこれを実行できることはわかっていますが、レベルの混合に戻ってしまいます。ID x ( ) の要素の存在を確認する方法も知っています$("#x").lengthが、これが「存在する場合は ID x の要素、存在しない場合は本体」というエレガントな表現にどのようにつながるかはわかりません。

そのような定式化は存在しますか？

4

2 に答える 2

3

正直なところ、これは非常に冗長だとは思いません。

var parent = $('#x');
if(parent.length == 0) parent = $('body');

また、その意図も非常に明確です。このイディオムが頻繁に出てくる場合は、関数でラップすることもできます。

また、各クエリを 1 回だけ起動する 3 項形式を次に示します (ただし、読みやすさとのトレードオフになります)。

var parent = (x = $('#header')).length ? x : $('body');
于 2012-07-22T03:29:04.623 に答える
2

jQuery を使用して要素を選択する代わりに、jQuery を使用してネイティブ DOM 呼び出しをラップできます。

$(document.getElementById("foo") || document.body)

それは正確に洗練されているわけではなく (または実際に jQuery を使用していても)、普遍的に適用可能な手法ではありませんが、追加できるものになります (そして、比較的安価な jQuery 呼び出しが 1 回だけ発生します)。

first()たとえば、$("#foo, body").first();選択した要素を返す順序は、セレクターの順序ではなく DOM の順序に基づいているため、使用できません (@muistooshort に感謝)。

于 2012-07-22T03:32:58.023 に答える