Question

我有一个列表项

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

Answer 1

我在想这样的东西是你在找什么？

首先，我们将组合的锚点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>");
            }
        }
    }
});

将图像锚标签复制到具有相同图像SRC的图像

1 个答案: