Атрибут набора JQuery для каждого элемента

Question

Я хочу установить атрибут каждого тега как sgc тега img.

Вот что я сделал.

$(document).ready(function() { 
 

 
\t var href=$('.single img').attr('src'); 
 
\t $('.single').attr('href',href); 
 
\t $(".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" > 
 
\t <img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" /> 
 
</a> 
 
<a class="single" > 
 
\t <img src="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_m.jpg" alt="" /> 
 
</a> 
 
<a class="single" > 
 
\t <img src="http://farm2.staticflickr.com/1669/23976340262_a5ca3859f6_m.jpg" alt="" /> 
 
</a> 
 
<a class="single" > 
 
\t <img src="http://farm2.staticflickr.com/1459/23610702803_83655c7c56_m.jpg" alt="" /> 
 
</a>

Но каждый тег имеет такой же HREF.

Как я могу это исправить

Answer 1

Вы должны пройти все изображения и назначить их по одному (это использует ваш собственный код). Вы можете сделать что-то вроде:

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

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

Answer 2

Вы можете использовать attr() с обратным вызовом, который перебирать элементы и обновления атрибута, получая детей img значение атрибута

$(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' 
 
     } 
 
    } 
 
    }); 
 
})

<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>