Lựa chọn theo yếu tố ID + phần tử lớp mang lại cùng một yếu tố hai lần

Question

Tại sao jQuery trả về cùng một phần tử hai lần ở đây?

Đã kiểm tra HTML nhiều lần, chỉ có một <div> với id="3" và class="password_field_real".

Đây là kết quả để nhận tất cả các yếu tố với 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>, 
] 

Tuy nhiên, khi tôi cố gắng để có được class="password_field_real" và id="3", tôi nhận được một danh sách của hai divs, mà là như nhau!

> $("#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> 
] 

Đây không phải là trường hợp với hai divs khác:

> $("#7.password_field_real") 

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

Tại sao điều này có thể xảy ra?

* CẬP NHẬT *

Reproduced này trong jsFiddle

* CẬP NHẬT # 2 *

Nếu ID không phải số được sử dụng, tất cả mọi thứ works just fine.

Answer 1

Trước hết, một id phải là duy nhất trên một trang . Đó là ý tưởng đằng sau nó.

Vấn đề của bạn là bạn sử dụng một bộ chọn ID không hợp lệ (theo HTML4):

1. ID và TÊN thẻ phải bắt đầu bằng một chữ cái ([A-Za-z]) và có thể theo sau là số chữ cái, chữ số ([0-9]), dấu gạch ngang ("-"), dấu gạch dưới ("_"), dấu hai chấm (":") và dấu chấm (".").

Trong các loại tài liệu khác có các hạn chế khác nhau nhưng bạn luôn cần ít nhất một chữ cái. Vì bạn chỉ sử dụng một số, nó không hợp lệ. Đó có thể là lời giải thích khi bạn sử dụng mọi thứ không phải là số ID. Tuy nhiên đó là một hành vi hơi kỳ lạ của jQuery.

Chuẩn bị ID của bạn với ít nhất một chữ cái [A-Za-z] hoặc thậm chí tốt hơn, làm cho mô tả của nó.

Answer 2

KHÔNG BAO GIỜ sử dụng nhiều thời gian cùng một id, id phải là duy nhất

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

mã thực sự ngớ ngẩn này chỉ cần chọn một tốt của bạn, nhưng không bao giờ sử dụng, sẽ gây ra ngày tận thế

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

nếu bạn cần id hiện tại cho mỗi "div" và "a" phụ, hãy thử dữ liệu- tại sao không phải mã như vậy

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

no w bạn có thể lấy được id của hiện tại từ tất cả các tiểu "div" và "a" với .data ("id")

bởi dụ:

$(".password_field_mask").click(function(){ alert($(this).data("id")); });