jQuery mỗi vòng lặp - sử dụng các biến

Question

Tôi có một danh sách các sản phẩm. Mỗi sản phẩm đều có tiêu đề và liên kết đánh giá. Hiện tại, các tiêu đề liên kết trực tiếp đến trang sản phẩm riêng lẻ và các liên kết đánh giá sẽ đi đến nơi khác.

Tôi muốn sử dụng jquery mỗi vòng lặp để chuyển qua từng li, lấy href từ tiêu đề (liên kết đầu tiên) và áp dụng nó vào liên kết đánh giá (liên kết thứ hai), vì vậy chúng đều trỏ đến trang sản phẩm.

đang Giản sẽ như sau:

<ul> 
    <li><a href="product1.html">Product 1</a><a href="review1.html">Review 1</a></li> 
    <li><a href="product2.html">Product 2</a><a href="review2.html">Review 2</a></li> 
    <li><a href="product3.html">Product 3</a><a href="review3.html">Review 3</a></li> 
</ul> 

Tôi nghĩ rằng nó sẽ là một cái gì đó như sau:

$("li").each(function(){ 
    var link = $("a:eq(0)").attr('href'); 
    $("a:eq(1)").attr("href", link); 
}); 

Nhưng nó luôn luôn sử dụng "liên kết" biến tương tự.

Ai đó có thể giúp tôi không?

Answer 1

tôi đi qua this như một tham số để xác định bối cảnh cho mỗi lần lặp của vòng lặp each(). Trên mỗi lần lặp lại, this đề cập đến phần tử được đề cập.

$("li").each(function(){ 
    var link = $("a:eq(0)", this).attr('href'); 
    $("a:eq(1)", this).attr("href", link); 
}); 

Answer 2

$("li").each(function(){ 
    var link = $(this).find("a:eq(0)").attr('href'); 
    $(this).find("a:eq(1)").attr("href", link); 
}); 

Answer 3

của nó bởi vì bạn đang không sử dụng li như bối cảnh lựa chọn a của bạn:

Hãy thử điều này:

$("li").each(function(){ 
    var a = $('a',this); 
    var link = a.filter(":eq(0)").attr('href'); 
    a.filter(":eq(1)").attr("href", link); 
}); 

Answer 4

Hãy thử:

$("li").each(function(){ 
    var link = $("a:eq(0)", this).attr('href'); 
$("a:eq(1)", this).attr("href", link); 
    }); 

Answer 5

Một lựa chọn khác mà tránh phải sử dụng .each hoàn toàn là chuyển một hàm làm đối số thứ hai cho .attr.

này hoạt động như sau:

$('li').find('a:nth-child(2)').attr('href', function(index, href) { 
    return $(this).prev('a').attr('href'); // use previous sibling's href 
}); 

Về cơ bản, nó sẽ mất mỗi yếu tố phù hợp với chọn, vượt qua nó thông qua chức năng, và sau đó thiết lập các thuộc tính href đến kết quả của chức năng đó. Hàm sẽ được chuyển đối số: đầu tiên là chỉ mục của nó trong tập hợp phù hợp ($('li a:nth-child(2)') tại đây) và thứ hai là giá trị hiện tại của thuộc tính. Trong trường hợp cụ thể của bạn, bạn không quan tâm đến một trong hai, nhưng thường bạn sẽ muốn chuyển đổi một thuộc tính dựa trên giá trị hiện tại của nó, do đó, nó có thể được thuận tiện.

Loại nào để sử dụng hoàn toàn là vấn đề về hương vị, bộ jQuery cho phép bạn thực hiện rất nhiều thứ mà không phải sử dụng trực tiếp .each.