Question

所以基本上我所拥有的是文章里面的一些div，基本上是这样的：

<article class="post">
  <div class = "page-content 1"></div>
  <div class = "page-content 2"></div>
  <div class = "page-content 3"></div>
  <div class = "page-content 4"></div>
  <div class = "page-content 5"></div>
</article>

现在拿这些div我想根据看起来非常像这样的div来创建一个列表：

<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
<li>Content4</li>
<li>Content5</li>
</ul>

列表中的“ContentX”文本不是必需的。基本上它最终应该是一个网站导航到目前为止，我试图获取存储在变量中的div数量，然后根据此变量创建列表。

这是为了获得div的数量以及我第一次尝试创建列表：

var divAmount = jQuery(' .post > div').length;
jQuery("<ul id='newList'></ul>"); 
for (i = 0; cnt < divAmount; i++) { 
  $("#newList").append("<li></li>"); 
})

我不知道如何从头开始创建这样的列表。对你们这些人来说可能是一件容易的事，但我对jQuery很新，基本上不知道我在做什么......

Answer 1

$("body").append("<ul></ul>");

$("article div").each(function(){
var content=$(this).attr("class").replace("page-", "")
$("ul").append("<li>"+content+"</li>");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="post">
  <div class = "page-content 1"></div>
  <div class = "page-content 2"></div>
  <div class = "page-content 3"></div>
  <div class = "page-content 4"></div>
  <div class = "page-content 5"></div>
</article>

jQuery从div的数量创建一个动态列表

1 个答案: