Jquery 对于每个<；ul>；，计数<；李>；标记并基于该编号创建元素

我试图在我的页面上遍历每个UL，计算每个UL中列表项的数量，然后在ol标记中为每个部分中的每个列表项添加一个新的列表项。因此，对于第一部分的ol标记，应该创建三个列表项，对于第二部分，应该创建四个列表项

我正在处理的页面将有数量不确定的部分，每个部分中的列表项数量不同。到目前为止，我能做的最好的事情就是在每个ol标记中添加7个列表项（整个页面的总数）

<section>
<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>
<ol><!--Add new list items Here-->
</ol>
</section>
<section>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ol><!--Add new list items Here-->
</ol>
</section>

一,
二,
三,


一,
二,
三,
四,

这是我现在得到的：

var $sections = $('section')

for (i = 0; i < $sections.length; ++i) {
    var $ol = $.find('ol');
    var $items = $.find('ul li');
}
$($items).each(function(){
    $($ol).append("<li><a href='#'>Element Created</a></li>");
});

var$sections=$（“section”）
对于（i=0；i<$sections.length；++i）{
变量$ol=$.find（'ol'）；
变量$items=$.find（'ul li'）；
}
$（$项）。每个（函数（）{
$（$ol）.追加（“
”）；
});

我还想将创建的列表项的每个href设置为它自己的索引。这意味着最终结果应该如下所示：

<section>
<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>
<ol>
    <li><a href='0'>Element Created</a></li>
    <li><a href='1'>Element Created</a></li>
    <li><a href='2'>Element Created</a></li>
</ol>
</section>
<section>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ol>
    <li><a href='0'>Element Created</a></li>
    <li><a href='1'>Element Created</a></li>
    <li><a href='2'>Element Created</a></li>
    <li><a href='3'>Element Created</a></li>
</ol>
</section>

一,
二,
三,





一,
二,
三,
四,

---

谢谢你能给我的帮助

您应该通过

每个

通过ul元素进行迭代。在回调中，

这个

引用相应的ul，您可以计算其中的元素

$('ul').each(function(){
  console.log( $(this).children('li').size() );
  for (var i = 0; i < $(this).children('li').size(); i++) { 
     $(this).next('ol').append("<li><a href='" + i + "'>Element Created</a></li>");
  }
});

$（'ul'）。每个（函数（）{
log（$（this.children（'li'）.size（））；
对于（var i=0；i<$（this）.children（'li'）.size（）；i++）{
$（this.next（'ol'）。追加（“
”）；
}
});

它的作用是：

查找页面上的每个ul元素

查找其同级“ol”元素

迭代ul的每个“li”元素子元素

使新“li”对象的“href”属性成为对象的索引。（或通过索引执行任何其他需要的操作）

将此子项复制到同级“ol”中

---

我自己解决这个问题的方法是：

// Select 'ul' elements, iterate over them using 'each()' method:
$('ul').each(function(){
    // we'd be using $(this) twice, so we're caching for a slight
    // performance benefit:
    var $this = $(this);

    // finding the 'ol' nextSibling, setting its HTML to the HTML of the
    // current 'ul' element:
    $this.next('ol').html($this.html())
    // finding the 'li' elements:
    .find('li')
    // iterating over those, using 'each()':
    .each(function(i,el){
    // i: the index of the current 'li' in the collection,
    // el: the current Node (effectively the 'this' node).
       // creating a new 'a' element, setting its properties:
        $('<a />', {
            'href' : '#' + i,
            'title' : 'Link to: ' + i,
            'text' : 'Element created'
        // replacing the current childNodes of 'el', with the created
        // element:
        }).replaceAll(el.childNodes);
    });
});

//选择'ul'元素，使用'each（）'方法对其进行迭代：
$（'ul'）。每个（函数（）{
//我们将使用$（这个）两次，所以我们将缓存一点
//绩效效益：
var$this=$（this）；
//查找“ol”下一个标签，将其HTML设置为
//当前“ul”元素：
$this.next（'ol'）.html（$this.html（））
//查找“li”元素：
.find（'li'））
//使用“each（）”对这些进行迭代：
.每个（功能（i，el）{
//i:集合中当前“li”的索引，
//el：当前节点（实际上是“此”节点）。
//创建新的“a”元素，设置其属性：
$（'）

参考资料：


JavaScript:



jQuery：






您意识到创建的
元素中前三项的
href
将指向同一个位置？这就是您想要的吗？@DavidThomas是的，这就是我想要的。上面的HTML并不是我实际正在做的事情的真实表示，只是一个简化版本，去掉了与我的工作无关的所有内容问题。在不了解我使用href index value的目的的情况下，我可以肯定地看到这是一件奇怪的事情。感谢您的回答和JS Fiddle示例！非常欢迎您，我只希望它有一些用处：）
// Select 'ul' elements, iterate over them using 'each()' method:
$('ul').each(function(){
    // we'd be using $(this) twice, so we're caching for a slight
    // performance benefit:
    var $this = $(this);

    // finding the 'ol' nextSibling, setting its HTML to the HTML of the
    // current 'ul' element:
    $this.next('ol').html($this.html())
    // finding the 'li' elements:
    .find('li')
    // iterating over those, using 'each()':
    .each(function(i,el){
    // i: the index of the current 'li' in the collection,
    // el: the current Node (effectively the 'this' node).
       // creating a new 'a' element, setting its properties:
        $('<a />', {
            'href' : '#' + i,
            'title' : 'Link to: ' + i,
            'text' : 'Element created'
        // replacing the current childNodes of 'el', with the created
        // element:
        }).replaceAll(el.childNodes);
    });
});