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>

点击任何 a 之后我想获得一个列表：

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

我在jquery上需要什么代码？

不替换ul，只需在

之后添加新的div

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

Answer 1

$('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 2

如果想要用新的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 3

在您的点击处理程序中：

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

然后可以将

newDiv插入到DOM中，如果这是您想要的内容，则替换旧列表，或者将其添加到其他位置的页面中。

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

3 个答案: