1

我有 2 个无序列表都包含图像，但 list2 将具有与 list1 相同的图像，但有添加。

我想用 list1 图像源检查 list2 图像源，如果 list1 中缺少图像源，我想添加它们。

这是列表的示例

 <ul class="list1">
     <li><a href="#"><img src="http://lorempixel.com/400/200/"/></a></li>
     <li><a href="#"><img src="http://lorempixel.com/400/200/"/></a></li>
     <li><a href="#"><img src="http://lorempixel.com/400/200/"/></a></li>
     <li><a href="#"><img src="http://lorempixel.com/400/200/"/></a></li>
  </ul>

<ul class="list2">
    <li><a href="#"><img src="http://lorempixel.com/400/400/"/></a></li>
    <li><a href="#"><img src="http://lorempixel.com/400/200/"/></a></li>
    <li><a href="#"><img src="http://lorempixel.com/200/200/"/></a></li>
    <li><a href="#"><img src="http://lorempixel.com/400/200/"/></a></li>
</ul>

这是我认为应该做的事情，但我现在不太确定。 http://jsfiddle.net/pNtHQ/4/

诸如检查两个列表的来源和 list1 中缺少的来源之类的东西会被添加。

4

3 回答 3

2

你可以试试这个——

$('.list1 img').each(function(){
  var src = $(this).attr('src');
  if($('.list2').find('img[src="'+src+'"]').length === 0){
   $('.list2').append($(this).closest('li').clone());
  }
})

演示--> http://jsfiddle.net/pNtHQ/7/

于 2013-06-06T19:24:50.513 回答
2

有几种不同的方法可以解决这个问题，这是我的：

$("ul.list2 li img").each(function () {
    var imgSrc = $(this).attr("src")
    var matched = $("ul.list1 li img[src='" + imgSrc + "']");
    if (!matched.length) {
        $("ul.list1").append("<li><a href='#'><img src='" + imgSrc + "'/></a></li>")
    }
});

在此处查看实际操作

于 2013-06-06T19:29:25.500 回答
1

我认为这可以使用属性包含选择器来完成。 http://api.jquery.com/attribute-contains-selector/

示例：http: //jsfiddle.net/6aktY/1/

$("ul.list1 li img").each( function() {
    var url = $( this ).attr( 'src' );
    var search_results = $( 'ul.list2 li img[src*="' + url + '"]' );

    if( search_results.size() === 0 )
    {
        $( 'ul.list2' ).append( '<li><a href="#"><img src="' + url + '" /></a></li>' );
    }
});
于 2013-06-06T19:41:10.047 回答