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

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中？例如:我想将 mango.jpg 添加到 bear.jpg 之后和 raspberry.jpg 之前的第 4 个图像位置。

Answer 1

使用下面的代码添加 slider 图像。此代码将根据名称将图像插入到 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 + '">'));
}