Jquery：Help。画像をラップする

Question

助けが必要です。私は画像のdivを持っています。

私は、すべての画像を取得する hrefは、画像のSRCことでアンカー <a href="">でそれらをラップして、これは私がこれまで持っているものである <li>

内の各1をラップする必要が

<div id="thumbs" class="navigation"> 
    <ul class="thumbs"> 
    <p> 
     <img src="assets/images/example-1.jpg" alt="" width="600" height="400" />  
     <img src="assets/images/example-2.jpg" alt="" width="600" height="400" /> 
     <img src="assets/images/example-3.jpg" alt="" width="600" height="400" /> 
     <img src="assets/images/example-4.jpg" alt="" width="600" height="400" /> 
     <img src="assets/images/example-5.jpg" alt="" width="600" height="400" /> 
     <img src="assets/images/example-6.jpg" alt="" width="600" height="400" /> 
     <img src="assets/images/example-7.jpg" alt="" width="600" height="400" /> 
    </p> 
    </ul> 
</div> 

：

var b = $('#thumbs > .thumbs'); // Get a reference to the banner div 
    var i = b.find('img'); // Pull all the images 
    var src = i.attr('src'); 
    b.empty().append(i); // Empty the banner div, and replace the images 
    b.find('img').wrap('<li><a href="' + src + '" /></li>'); // Wrap the images 

作品のこの種のが、私はページ上の複数のdivを持って、それぞれが異なる画像を持っている、とjqueryのは、今、各div要素からすべての画像を引っ張って一緒にすべてを追加しています。だから、基本的に私は

機能を実行します

$(function() { 
    $("div.navigation").ParseImages(); 
}); 

...そして、このようなコードを呼び出す

$.fn.ParseImages = function() { 
    $(this).each(function() { 
     var b = $(this).find('#thumbs > .thumbs'); // Get a reference to the banner div 
     var i = b.find('img'); // Pull all the images 
     var src = i.attr('src'); 
     b.empty().append(i); // Empty the banner div, and replace the images 
     b.find('img').wrap('<li><a href="' + src + '" /></li>'); // Wrap the images 
    }); 
}; 

...このようなあなたの機能をラップし、個々の<div>

Answer 1

ため、このjQueryのを必要としますすべてのdivでクラス "navigation"を使用します。

Answer 2

私はjQueryの機能を作る提案することができる、Archer @同じくらいのような、his answerで、やった：

$.fn.imgTidy = function() { 
    // finds the images within the child '.thumbs' div of $(this). 
    var images = $(this).find('.thumbs img'); 
    var iLength = images.length; 

    // iterates through each of the resulting image nodes, wrapping each in an 'li' element 
    $(images).each(
     function(){ 
      $(this).wrap('<li></li>'); 
     }); 

    /* if the parent node of the first 'li' element (assuming they all share a common 
     parent, so nested lists are going to be problematic with this approach) is 
     _not_ a 'ul' this unwraps all the list elements returned by the 
     '$('.thumbs li')' selector */ 

    if($('.thumbs li:first').parent().not('ul')){ 
     $('.thumbs li').unwrap(); 
    } 

    // returns the node(s) for chaining. 
    return $(this); 
}; 

そして、そのように呼び出す：

$('#thumbs').imgTidy(); 

JS Fiddle demo。