javascript - jquery - 如何从hrefs获取图像列表

Question

我有一个结构：

<ul>
 <li><a href="img01.jpg"><img src="img_s01.jpg"></a></li>
 <li><a href="img02.jpg"><img src="img_s02.jpg"></a></li>
...
</ul>

点击任何一个我想得到一个列表后：

<div>
<img src="img01.jpg">
<img src="img02.jpg">
...
</div>

我在 jquery 上需要什么代码？

不替换 ul，只是在之后添加新的 div

这个小提琴http://jsfiddle.net/28eue/

Answer 1

如果想法是用新元素替换现有ul元素，div您可以这样做：

$("ul").replaceWith($("<div />").append($("ul img")));

...在点击处理程序中：

$(document).ready(function() {
  $("ul a").click(function(e) {
    e.preventDefault();
    $("ul").replaceWith($("<div />").append($("ul img")));
  });
});

演示：http: //jsfiddle.net/k8N5M/

Answer 2

$('a').click(function(e) {
  e.preventDefault()
  var $replacement = $('<div>')

  $('a img').each(function() {
    $replacement.append($(this))
  })

  $('ul').replaceWith($replacement)
})

JSFiddle：http: //jsfiddle.net/sqz2t/

您基本上观察a标签上的点击并将所有图像放入新创建的 div 中。

该代码将用新的 div 构造替换图像列表。

Answer 3

在您的点击处理程序中：

var newDiv = $('<div></div>');
$('ul li a').each(function(i, elem) {
    newDiv.append($('<img src="' + elem.href + '"'));
});

newDiv然后可以插入到 DOM 中，如果这是您想要的，则替换旧列表，或者添加到其他地方的页面中。