2014-09-05 88 views
0

图像我有一个列表项复制图像的锚标记具有相同的图像SRC

<ul class="listWithAnchors"> 
    <li><a href="/link1"><img src="/path1.jpg" /></a></li> 
    <li><a href="/link2"><img src="/path2.jpg" /></a></li> 
    <li><a href="/link3"><img src="/path3.jpg" /></a></li> 
<ul> 

<ul class="listWithoutAnchors"> 
    <li><img src="/path2.jpg" /></li> 
    <li><img src="/path1.jpg" /></li> 
    <li><img src="/path3.jpg" /></li> 
<ul> 

我想使用jQuery包裹在具有匹配的src路径的锚标记的图像。所以最终的结果应该是这样的:

<ul class="listWithoutAnchors"> 
    <li><a href="/link2"><img src="/path2.jpg" /></a></li> 
    <li><a href="/link1"><img src="/path1.jpg" /></a></li> 
    <li><a href="/link3"><img src="/path3.jpg" /></a></li> 
<ul> 

回答

0

我在想这样的事情是你在找什么?

首先,我们通过浏览列表中的每个列表元素并使用锚点将组合锚点URL和图像src存储在数组中。然后我们循环访问另一个列表,并将每个列表项的图像的src与我们的数组进行比较,如果匹配,我们将URL也存储在发生src匹配的对象中。

$(document).ready(function(){ 
    var someArray = new array() 
    $(".listWithAnchors li a").each(function(i){ 
     var link = $(this).attr('href'); 
     var src = $("a",this).attr('src'); 
     someArray.push({"l":link,"s":src}); 
    }); 

    $(".listWithoutAnchors li").each(function(i){ 
     var othersrc = $("img",this).attr('src'); 
     for(var j=0;j<someArray.length;j++){ 
      if(someArray[j]["s"] == othersrc){ 
       $(this).html("<a href='"+someArray[j]["l"]+"'>"+$(this).html()+"</a>"); 
      } 
     } 
    } 
});