Question

我有一个div，其中包含幻灯片中显示的图像列表。

HTML

<div id="slideshow">
<img  src="../../img/apple.jpg"   >
<img src="../../img/banana.jpg"  >
<img  src="../../img/bear.jpg"   >
<img src="../../img/raspberry.jpg"  >
<img  src="../../img/strawberry.jpg"   >
</div>

我有一个JQuery函数可以动态地将图像添加到幻灯片中

的Javascript

$( "#slideshow" ).append('<img src="../../img/' + new_fruit_image + '">');

有没有办法根据名称将图像添加到div中？例如：我想在bear.jpg之后和raspberry.jpg之前将mango.jpg添加到第4个图像位置。

Answer 1

使用以下代码添加滑块图像。此代码将根据名称将图像插入div中。

var new_fruit_image = 'mango.jpg';
var i=0;
var imgs = new Array();
$('#slideshow img').each(function(){
  var src = $(this).attr("src");
  imgs[i++] = src.match(/(\w*)\.\w{3,4}$/)[1];
});
var newImg = new_fruit_image.match(/(\w*)\.\w{3,4}$/)[1];
imgs[i] = newImg;
imgs.sort();
var insertPosition = $.inArray(newImg,imgs);
if(insertPosition!=0)
{
  $("div#slideshow img").eq(insertPosition-1).after($('<img src="../../img/' + new_fruit_image + '">'));
} else {
  $("div#slideshow img").eq(insertPosition).before($('<img src="../../img/' + new_fruit_image + '">'));
}

Answer 2

你可以试试这样的事情

function rearrange() {
 var elements = $('img');
 var images = elements.map(function () {
    var src = this.src;
    return src.substring((src.lastIndexOf('/') + 1), src.length);
 });
 images.sort();
 $.each(images, function (index, value) {
    $('#slideshow').append($('img[src*="' + value + '"]'));
 });
}

Demo

我想使用jQuery将图像追加到具有预先存在的图像的div中，并按字母顺序排列图像

2 个答案: