[英]jQuery .each() function to modify DOM
使用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>
我猜你的意思是你想结束:
<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>
只需使用html标签添加url结果,例如:
$('#right a[href*=".jpg"]').each(function(index){
var imgSrc = $(this).attr('href');
var url = '<li><img src="' + imgSrc + '"/></li>';
console.log(url);
});
我将在#left
添加一个ul
元素,并将图像li
s添加到该元素中,如下所示:
$(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 );
});
$(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 ); });
<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>
您可以执行以下操作:
$(document).ready( function(){
$("#right a[href*='.jpg']").each( function(){
$("#left").append("<li><img src='" + this.href + "'></li>");
});
});
在这里查看: JSFiddle
我将亲自创建一个字符串,然后将其添加到某个地方的div中。 这是一个例子。
var list = '<ul>';
$('#right a[href*=".jpg"]').each(function(index){
list += '<li><img src="' + this.href +'" /></li>'
});
list += '</ul>';
$('#destination').html(list);
最好的方法是使用$选择器匹配以该字符串结尾的所有属性。
$('#right a[href$=".jpg"]').each(function (index) {
$('#left').append($('<li/>').append($('<img/>').attr('src', $(this).attr('href'))));
});
这是一个带有工作示例的fildde:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.