cách lặp lại kết quả của bộ chọn jquery

Question

Tôi muốn lặp lại kết quả của bộ chọn truy vấn.

mã HTML

<nav id="navigation"> 
     <a href="#" tabindex="1" class="active_nav">nav1</a> 
     <a href="#" tabindex="2">nav2</a> 
     <a href="#"tabindex="3">nav3</a> 
</nav> 

khi tôi sử dụng javascript

alert($("#navigation >a")[0]); 

kết quả là thẻ a href thuộc tính Tôi không biết tại sao.

Answer 1

Sử dụng $.each

$("#navigation > a").each(function() { 

    console.log(this.href) 
}); 

---

$('#navigation > a')[0] 
    ^   ^---- Selects the 1st dom object from the jQuery object 
     |     that is nothing but the index of the element among 
     |     the list of elements 
     |------- Gives you children of nav(3 anchor tags in this case) which is a 
       jQuery object that contains the list of matched elements 

Answer 2

Hãy thử sử dụng

console.log($("#navigation >a")) 

thay vào đó, để bạn có thể xem tất cả các kết quả trong giao diện điều khiển (cmd + alt + i trong chrome)

Answer 3

Trong jQuery, khi bạn sử dụng chỉ mục như [0], điều đó có nghĩa là bạn đang truy cập phần tử DOM. Đó là lý do tại sao

$("#navigation >a")[0] 

trả về <a> thẻ.

Để lặp một kết quả selector jQuery, sử dụng mỗi

$("#navigation >a").each(function(index, elem){ 
}); 

Answer 4

Bạn có thể sử dụng jQuery built-in each() cho lặp này như thế này:

$("#navigation>a").each(function(index){ 
    console.log("I am " + index + "th element."); 
    //and you can access this element by $(this) 
}); 

Answer 5

Nếu bạn muốn để lặp tất cả <a> thẻ, bạn có thể sử dụng từng chức năng

$('#navigation >a').each(function() { 
    alert(this.href); 
}); 

và nếu bạn chỉ muốn nhận được <a> thẻ đầu tiên sau đó sử dụng .eq()

alert($('#navigation >a').eq(0).attr('href'); 

Answer 6

Sử dụng first() như thế này:

var element = $("#navigation>a").first(); 
console.log(element); 

Reference