Jquery将属性设置为每个元素

时间:2016-05-05 09:57:11

标签: javascript jquery html

我想将每个标签的属性设置为img标签的src。

这就是我所做的。

$(document).ready(function() {

	var href=$('.single img').attr('src');
	$('.single').attr('href',href);
	$(".single").fancybox({
          helpers: {
              title : {
                  type : 'float'
              }
          }
      });
      
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a class="single" >
	<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
<a class="single" >
	<img src="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_m.jpg" alt="" />
</a>
<a class="single" >
	<img src="http://farm2.staticflickr.com/1669/23976340262_a5ca3859f6_m.jpg" alt="" />
</a>
<a class="single" >
	<img src="http://farm2.staticflickr.com/1459/23610702803_83655c7c56_m.jpg" alt="" />
</a>

但每个标签都有相同的href。

如何解决此问题

2 个答案:

答案 0 :(得分:1)

您可以将 attr() 与回调一起使用,该回调会迭代元素并通过获取子img属性值来更新属性

&#13;
&#13;
$(document).ready(function() {
  $('.single').attr('href', function() { // iterate over a tag
    return $(this)
    .find('img') // get children img
    .attr('src') // get arc attribute
  });
  $(".single").fancybox({
    helpers: {
      title: {
        type: 'float'
      }
    }
  });
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a class="single">
  <img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
<a class="single">
  <img src="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_m.jpg" alt="" />
</a>
<a class="single">
  <img src="http://farm2.staticflickr.com/1669/23976340262_a5ca3859f6_m.jpg" alt="" />
</a>
<a class="single">
  <img src="http://farm2.staticflickr.com/1459/23610702803_83655c7c56_m.jpg" alt="" />
</a>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您应该浏览所有图像并逐个分配(使用您自己的代码)。 你可以这样做:

$(document).ready(function() {
    $(".single img").each(function() {
        var href=$(this).attr('src');
        $(this).parent().attr('href',href);
    })

    $(".single").fancybox({
        helpers: {
            title : {
                type : 'float'
            }
        }
    });
})