[英]jQuery .each() function to modify DOM
With the jQuery.each
function I'm trying to get all of the ".jpg" related url's of a certain div. 使用
jQuery.each
函数,我试图获取某个div的所有与“ .jpg”相关的网址。 What I want to accomplish is to find each A element containing such url and insert the following HTML in it: <li><img src="imgSrc"/></li>
我要完成的工作是找到每个包含此类URL的A元素,然后在其中插入以下HTML:
<li><img src="imgSrc"/></li>
$('#right a[href*=".jpg"]').each(function(index){
var imgSrc = $(this).attr('href');
console.log(imgSrc);
});
this above example is all I've got right now, I've tried things like: 上面的例子是我现在所拥有的,我已经尝试过类似的事情:
$('#destination img').attr('src', imgSrc);
To maybe make some things more clear the example below wil make things more clear. 为了使某些事情更清晰,下面的示例将使事情更清晰。
<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>
I'm guessing you mean you want to end up with: 我猜你的意思是你想结束:
<li><a href="http://example.com/images/example1.jpg"><img src="http://example.com/images/example1.jpg"></a></li>
...which isn't quite literally wrapping the links in that structure. ...实际上并不是将链接包装在该结构中。
You can do that with wrap
, but it's an invalid structure — div
can't have li
as direct children. 您可以使用
wrap
做到这一点,但这是一个无效的结构div
不能将li
作为直接子级。 The only valid containers for li
are ul
, ol
, and template
. li
的唯一有效容器是ul
, ol
和template
。
You'd do it like this: 您可以这样做:
var $left = $("#left");
$('#right a[href*=".jpg"]').each(function() {
$left.append('<li><img src="' + this.href + '"></li>');
});
You'll still have to deal with the li
thing. 您仍然必须处理
li
事情。 :-) :-)
Here's an example where #left
is a ul
rather than a div
: 这是一个示例,其中
#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>
Just add the url result with the html tag like: 只需使用html标签添加url结果,例如:
$('#right a[href*=".jpg"]').each(function(index){
var imgSrc = $(this).attr('href');
var url = '<li><img src="' + imgSrc + '"/></li>';
console.log(url);
});
I would add a ul
element inside #left
and I would add the image li
s into this element as follows: 我将在
#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>
I would personally make a string then add that to a div somewhere. 我将亲自创建一个字符串,然后将其添加到某个地方的div中。 Here is an example.
这是一个例子。
var list = '<ul>';
$('#right a[href*=".jpg"]').each(function(index){
list += '<li><img src="' + this.href +'" /></li>'
});
list += '</ul>';
$('#destination').html(list);
The best way to do that is to use the $ selector to match all attributes ending with that string. 最好的方法是使用$选择器匹配以该字符串结尾的所有属性。
$('#right a[href$=".jpg"]').each(function (index) {
$('#left').append($('<li/>').append($('<img/>').attr('src', $(this).attr('href'))));
});
Here is a fildde with a working example: 这是一个带有工作示例的fildde:
http://jsfiddle.net/Lq1u2v7n/1/ http://jsfiddle.net/Lq1u2v7n/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.