[英]jQuery append() and data()
我的div数目不明,且ID不断增加:
<div id="source-1" data-grab="someURL"/>Content</div>
<div id="source-2" data-grab="anotherURL"/>Content</div>
<div id="source-3" data-grab="anddifferentURL"/>Content</div>
<div id="source-4" data-grab="andthelastoneURL"/>Content</div>
我还有另一个清单:
<ul>
<li id="target-1" class="target"><a href="#"> </a></li>
<li id="target-2" class="target"><a href="#"> </a></li>
<li id="target-3" class="target"><a href="#"> </a></li>
<li id="target-4" class="target"><a href="#"> </a></li>
</ul>
现在,我要实现的是从source-1抓取数据抓取URL,并将其作为映像附加到target-1。 因此,最终输出列表将如下所示:
<ul>
<li id="target-1"><a href="#"><img src="someURL" /> </a></li>
<li id="target-2"><a href="#"><img src="anotherURL" /> </a></li>
<li id="target-3"><a href="#"><img src="anddifferentURL" /> </a></li>
<li id="target-4"><a href="#"><img src="andthelastoneURL" /> </a></li>
</ul>
我要从第一个列表中获取所有数据,但不确定如何将正确的源元素附加到正确的目标元素?
$(document).ready(function(){
$('.target').each(function(){
var URL = jQuery(this).data('grab');
});
});
$(document).ready(function(){
$('.target').each(function(){
var $this = $(this);
var divID = "source-" + ($this.id()).split("-")[1];
$("a", $this).append('<img src="' + $(divID).data("grab") + '" />');
});
});
如果将类添加到源元素(例如.source
),则可以使用索引选择正确的元素:
$(document).ready(function(){
var targets = $( '.target' );
$('.source').each(function(index, value){
$(target[index]).children("a").first().append($("<img src=" + value.data('grab') + " />"));
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.