Question

好的，我会尽力解释这个

我想做什么

创建一个Jquery函数，它将从两个不同的文件夹创建一个列表，这样就可以为我提供最多30个图像的内容

<div id="box">
    <ul>
      <li><a href="images/test1.jpg"><img src="imagesthumbs/test1.jpg" alt="" /></a></li>
      <li><a href="images/test2.jpg"><img src="imagesthumbs/test2.jpg" alt="" /></a></li>
      <li><a href="images/test3.jpg"><img src="imagesthumbs/test3.jpg" alt="" /></a></li>
    </ul>
</div>

这可能是最简单的写作方式吗？

感谢

昭

Answer 1

function addItems(num) {
  var myList = $('#box > ul').first();
  for(var i = 1; i <= num; i++) {
    myList.append('<li><a href="images/test' + i + '.jpg"><img src="imagesthumbs/test' + i + '.jpg" alt="" /></a></li>');
  }
}

调用此函数会在ul中找到带有id'框'的第一个div项，并向其附加一堆li个元素。您要添加的元素数量将作为参数传递，因此如果您传递'5'，您将获得：

<li><a href="images/test1.jpg"><img src="imagesthumbs/test1.jpg" alt="" /></a></li>
<li><a href="images/test2.jpg"><img src="imagesthumbs/test2.jpg" alt="" /></a></li>
<li><a href="images/test3.jpg"><img src="imagesthumbs/test3.jpg" alt="" /></a></li>
<li><a href="images/test4.jpg"><img src="imagesthumbs/test4.jpg" alt="" /></a></li>
<li><a href="images/test5.jpg"><img src="imagesthumbs/test5.jpg" alt="" /></a></li>

...已添加到您的ul。

您可以使用以下内容进行调用，假设您的html页面中有div个带有ul ID的“{1}}：

<script>
$(function() { // wrapping it this way ensures the page is loaded and the elements exist
  addItems(5);
});
</script>

Answer 2

假设你有两个数组作为两个不同的文件夹。你可以试试这个

var images = ["test1.jpg", "test2.jpg"];
var imagesthumbs = ["test1.jpg", "test2.jpg"];

var ul = $("<ul/>");
$.each(images, function(i, val){
   $("<li/>")
   .append($("a", {href:"images/"+val}).append("img", {src:imagesthumbs[i], alt:""}))
   .appendTp(ul);
});

$("#box").append(ul);

使用两个文件路径JQuery动态创建列表项

2 个答案: