Question

需要一些帮助。我有一些图像。

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

我需要获取所有图像，将它们包装在<a href="">的锚中，href是图像的src，然后将每个图像包裹在<li>

这是我到目前为止所做的：

    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中提取所有图像并将它们全部加在一起。所以基本上我需要为每个人<div>

提供这个JQuery

Answer 1

像这样包裹你的功能......

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

然后调用这样的代码......

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

那将使用“navigation”类在每个div上运行该函数。

Answer 2

我可以建议在Archer中创建一个jQuery函数，就像@ 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

Jquery：帮助。包装图像

2 个答案: