Chỉ chọn một phần tử trong bộ sưu tập jQuery

Question

Làm cách nào để giới hạn sự kiện vào một phần tử trong bộ sưu tập jQuery?

Trong trường hợp bên dưới, tôi đã thử sử dụng .one() để giới hạn hành vi (chèn dòng <li class='close'>Close</li> HTML) vào một trường hợp duy nhất. Hành vi này thực sự chỉ xảy ra một lần, nhưng trên MỌI yếu tố phù hợp của $("ul>li>a"). Làm thế nào để làm cho nó xảy ra chỉ một lần, để chỉ ONE của các yếu tố phù hợp trong bộ sưu tập?

Bất kỳ ý tưởng nào?

$("ul>li>a").one(
"click",  
function(){ 
    $("ul ul") 
    .prepend("<li class='close'>Close</li>") 
} 
); 

Xin cảm ơn trước.

-Là

Answer 1

Hãy thử first(), nó chọn phần tử đầu tiên:

$("ul>li>a").first().one('click',  
    function(){ 
     $("ul ul").prepend("<li class='close'>Close</li>") 
    } 
); 

one() được sử dụng, như bạn đã thấy, để xử lý một sự kiện chỉ lần.

Answer 2

Bạn có thể gọi phương thức first, sẽ trả về đối tượng jQuery mới chỉ chứa phần tử đầu tiên trong phần tử gốc.

Tuy nhiên, trong trường hợp của bạn, bạn cũng có thể sử dụng (tương đương) :first chọn, như thế này:

$("ul > li > a:first").click(function() { ... }); 

Nếu bạn chỉ muốn xử lý sự kiện đầu tiên click và bỏ qua bất kỳ nhấp chuột tiếp theo, bạn' sẽ cần sử dụng .one(), giống như bạn đã có.

Answer 3

Lựa chọn jQuery trả về một mảng. Do đó $("selection")[0] có thể hoạt động. Tuy nhiên có phương pháp trừu tượng tốt hơn cho điều này, như .get(0) hoặc .first() (trong trường hợp bạn đang tìm kiếm phần tử đầu tiên của vùng chọn/mảng).

$ ("lựa chọn"). Get (index) trả về phần tử DOM tinh khiết (ở đó chỉ số cụ thể) của vùng chọn, và là không bọc trong đối tượng jQuery.

$ ("lựa chọn"). Đầu tiên() trả về phần tử đầu tiên của vùng chọn, và kết thúc tốt đẹp nó trong một đối tượng jQuery.

Vì vậy, nếu bạn không muốn trả lại phần tử đầu tiên, nhưng vẫn muốn có chức năng jQuery, bạn có thể thực hiện $($("selection").get(index)).

Với tình hình của bạn, điều này sẽ làm việc tốt:

// bind the 'onclick' event only on the first element of the selection 
$("ul>li>a").first().click(function() { 
    $("ul ul").prepend("<li class='close'>Close</li>"); 
}); 

Đó là tương đương với điều này:

$($("ul>li>a").get(0)).click(function() { 
    $("ul ul").prepend("<li class='close'>Close</li>"); 
}); 

Và đây:

$($("ul>li>a")[0]).click(function() { 
    $("ul ul").prepend("<li class='close'>Close</li>"); 
}); 

---

tôi phải đồng ý với Ryan, đang nghiên cứu lựa chọn CSS chuỗi để lọc kết quả khá đắt so với chức năng mảng JavaScript gốc.

Answer 4

Bạn phải chỉ định chỉ mục của phần tử bạn muốn làm việc.

Nếu bộ chọn của bạn trả về nhiều phần tử, bạn có thể thực hiện một trong hai điều ... Bạn có thể tách riêng các phần tử của bạn bằng cách gán cho chúng một thuộc tính id hoặc lớp trong html của bạn và thay đổi bộ chọn để chỉ chọn lớp/id của phần tử/s bạn muốn chọn hoặc bạn có thể chỉ định chỉ mục của phần tử bạn đang cố gắng làm việc. Phương pháp sau này hơi cẩu thả nhưng hoạt động miễn là cấu trúc trang của bạn không bao giờ thay đổi.

Vì vậy, đối với phương pháp đầu tiên tôi nói về bạn muốn thay đổi chọn của bạn này sau khi áp dụng một lớp/id đến các yếu tố của bạn:

$("ul>li>a.class") 
or 
$("ul>li>a#id") 

Đối với phương pháp thứ hai tôi đã đề cập bạn muốn thay đổi chọn của bạn để này:

$("ul>li>a:eq(index)") 

Chỉ mục ở đâu là chỉ mục dựa trên số không của phần tử bạn đang cố chọn.

Answer 5

Bạn cần phải kết hợp đầu tiên() với một():

$("ul>li>a").first().one('click', function() {}); 

More chung:

$("ul>li>a:eq(n)").one('click', function() {});