javascript - 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

尝试这个：

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

加号应该正确地将link变量插入到字符串中。

Answer 2

map适用于从集合中提取属性集合：

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

但是因为看起来你想要迭代一组元素，并在每个元素上附加一些东西，我猜你想要 JQuery 的each：

$('#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> ' );
});

这是一般想法的简化小提琴。

Answer 3

由于您已经li在我们中缓存了元素，productDivs因此在搜索更多后代时。

然后用于.each()迭代一组选定的元素

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>' );
});