Question

使用jQuery.each功能，我试图获取某个div的所有“.jpg”相关网址。我想要完成的是找到包含这样的url的每个A元素并在其中插入以下HTML：<li><img src="imgSrc"/></li>

    $('#right a[href*=".jpg"]').each(function(index){  
        var imgSrc = $(this).attr('href');
        console.log(imgSrc);
    });

以上这个例子就是我现在所拥有的，我尝试过这样的事情：

$('#destination img').attr('src', imgSrc);

为了使一些事情更清楚，下面的例子将使事情更清楚。

<div id="left">     
   /* 
    Get the Urls of the a's in #right 
    and put them inside this div wrapped in an img tag: <img src="URL"/>
  */
</div>
<div id="right">
  <a href="http://example.com/images/example1.jpg"></a>
  <a href="http://example.com/images/example2.jpg"></a>
</div>

Answer 1

我猜你的意思是你最终想要：

<li><a href="http://example.com/images/example1.jpg"><img src="http://example.com/images/example1.jpg"></a></li>

......这并不完全包含该结构中的链接。

您可以使用wrap执行此操作，但这是一个无效的结构 - div不能将li作为直接子项。 li的唯一有效容器是ul，ol和template。

你这样做：

var $left = $("#left");
$('#right a[href*=".jpg"]').each(function() {
    $left.append('<li><img src="' + this.href + '"></li>');
});

你仍然需要处理li事情。： - ）

以下是#left为ul而不是div的示例：

var $left = $("#left");
$('#right a[href*=".jpg"]').each(function() {
    $left.append('<li><img src="' + this.href + '"></li>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="left">
</ul>
<div id="right">

  <a href="http://example.com/images/example1.jpg"></a>
  <a href="http://example.com/images/example2.jpg"></a>

</div>

Answer 2

只需使用html标记添加url结果，如：

    $('#right a[href*=".jpg"]').each(function(index){  

    var imgSrc = $(this).attr('href');
    var url = '<li><img src="' + imgSrc + '"/></li>';

    console.log(url);

});

Answer 3

我会在ul中添加#left元素，我会将图片li添加到此元素中，如下所示：

$(function() {
    var ul = $('<ul/>'),
        li = $('<li/>'),
        img = $('<img/>');
    $('#right a[href$=jpg]').each(function() {
        ul.append( li.clone().html( $(this).clone().html( img.clone().attr('src', this.href) ) ) );
    });
    $('#left').html( ul );
});

＆＃13;

$(function() {
  var ul = $('<ul/>'),
      li = $('<li/>'),
      img = $('<img/>');
  $('#right a[href$=jpg]').each(function() {
    ul.append( li.clone().html( $(this).clone().html( img.clone().attr('src', this.href) ) ) );
  });
  $('#left').html( ul );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">     

   /* 
    Get the Urls of the a's in #right 
    and put them inside this div wrapped in an img tag: <img src="URL"/>
  */

</div>

<div id="right">

  <a href="http://example.com/images/example1.jpg"></a>
  <a href="http://example.com/images/example2.jpg"></a>

</div>

＆＃13;

Answer 4

您可以这样做：

$(document).ready( function(){
    $("#right a[href*='.jpg']").each( function(){
        $("#left").append("<li><img src='" + this.href + "'></li>");       
    });    
});

请在此处查看：JSFiddle

Answer 5

我个人会创建一个字符串，然后将其添加到某个div的某个地方。这是一个例子。

var list = '<ul>';

$('#right a[href*=".jpg"]').each(function(index){  
    list += '<li><img src="' + this.href +'" /></li>'
});

list += '</ul>';

$('#destination').html(list);

Answer 6

最好的方法是使用$ selector匹配以该字符串结尾的所有属性。

 $('#right a[href$=".jpg"]').each(function (index) {
   $('#left').append($('<li/>').append($('<img/>').attr('src', $(this).attr('href'))));
 });

这是一个带有工作示例的fildde：

http://jsfiddle.net/Lq1u2v7n/1/

jQuery .each（）函数修改DOM

6 个答案: