10

ここでjQueryが同じ要素を2回返すのはなぜですか?

HTML を何度も確認しましたが、 と があるのは 1 つだけ<div>です。id="3"class="password_field_real"

これは、 を使用してすべての要素を取得した結果ですclass="password_field_real"。

> $(".password_field_real")

[
    <div class="password_field_real" id="2" style="display: none;"></div>, 
    <div class="password_field_real" id="3" style="display: none;"></div>,
    <div class="password_field_real" id="7" style="display: none;"></div>,
]

しかし、 と を取得しようとするclass="password_field_real"とid="3"、同じ 2 つの div のリストが表示されます。

> $("#3.password_field_real")

[
    <div class="password_field_real" id="3" style="display: none;"></div>,  
    <div class="password_field_real" id="3" style="display: none;"></div>
]

これは、他の 2 つの div には当てはまりません。

> $("#7.password_field_real")

[
    <div class="password_field_real" id="7" style="display: none;"></div>
]

なぜこれが起こるのでしょうか？

* アップデート *

これをjsFiddleで再現

*更新＃2 *

数値以外の ID を使用すると、すべて正常に機能します。

4

2 に答える 2

9

まず、idはページ上で一意である必要があります。それがその背後にある考え方です。

あなたの問題は、無効な ID セレクターを使用していることです ( HTML4によると):

  1. ID および NAME トークンは文字 ([A-Za-z]) で始まる必要があり、その後に任意の数の文字、数字 ([0-9])、ハイフン ("-")、アンダースコア ("_") を続けることができます、コロン (":")、およびピリオド (".")。

他の doctype にはさまざまな制限がありますが、常に少なくとも 1 文字は必要です。数字しか使っていないので無効です。それは、数値以外の ID を使用する場合の説明かもしれません。それでも、jQuery の少し奇妙な動作です。

ID の先頭に少なくとも 1 つの文字を追加する[A-Za-z]か、よりわかりやすいものにします。

于 2013-03-11T14:39:08.417 に答える
7

同じIDを複数回使用しないでください。IDは一意である必要があります

alert( $("#3").length ); // will just return 1 not 8

この本当にばかげたコードはあなたの良いものを選択するだけですが、決してそれを使用しないでください、世界の終わりを引き起こします

alert( $("#3").find("#3").filter(".password_field_real").attr("class") );

サブ「div」と「a」ごとに現在のIDが必要な場合は、データを試してください。そのようなコードを使用してみてください。

$(".password_entry").each(function(){
    var $t = $(this);
    var currentId = $t.attr("id");
    $t.find("div,a").data("id",currentId);
});

これで、.data（ "id"）を使用してすべてのサブ"div"および"a"から現在のIDを抽出できます。

例によって：

$(".password_field_mask").click(function(){ alert( $(this).data("id") ); });
于 2013-03-05T15:55:23.797 に答える