다중 선택을 처리하는 Jquery

Question

이것은 내가 오래 전 배웠어야 할 것이지만 어떻게 든 결코 그렇게하지 못했습니다.

var productDivs = $('#HomeNewProducts .ProductList li'); 

여기 li과 그 자녀를 여러 개 선택하는 간단한 줄이 있습니다. 이제,이 요소들 각각으로부터 링크를 추출하여 추가 할 요소를 연결하기 위해 링크를 사용한다고 가정 해 봅시다.

var link = $('#HomeNewProducts .ProductList li .ProductDetails a').attr('href'); 
productDivs.append('<a href=\"' . link . '\"><img src="#" /></a> '); 

Answer 1

map는 컬렉션 속성 컬렉션을 추출하기위한 좋은 :

// get .`attr('href')` from each element 
var links = $('#HomeNewProducts .ProductList li .ProductDetails a'); 
var hrefs = links.map(function(link) { 
    return $(link).attr("href"); 
}); 

하지만 당신은 요소의 집합을 반복하고, 각각에 무언가를 추가 할 것 같습니다 있기 때문에, 그런 것 같아요 일반적인 생각의

$('#HomeNewProducts .ProductList li').each(function(index, element) { 
    // find child link of the current element 
    var link = $(element).find(".ProductDetails a").attr('href'); 

    // append to the current element 
    $(element).append('<a href=\"' . link . '\"><img src="#" /></a> '); 
}); 

Here's a simplified Fiddle : 당신은 jQuery의 each합니다.

Answer 2

이 시도 :

var link = $('#HomeNewProducts .ProductList li .ProductDetails a').attr('href'); 
productDivs.append('<a href=\"' + link + '\"><img src="#" /></a> '); 

더하기 기호가 제대로 문자열로 link 변수를 삽입해야합니다.

Answer 3

li 요소를 이미 productDivs에 캐시 했으므로 이후 자손을 검색 할 때 유용합니다.

그런

var productDivs = $('#HomeNewProducts .ProductList li'); 
var link = productDivs.find('.ProductDetails a').each(function(){ 
    // do the appending from here 
    // this.href refers to the current link 

    productDivs.append('<a href=\"' + this.href + '\"><img src="#" /></a>'); 
});