Question

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

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

<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>");
});

我还想将创建的列表项的每个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>

感谢您提供任何帮助！

Answer 1

$('ul').each(function(){
   var olElement = $(this).next('ol');
   $(this).find('li').each(function(index){
        var elementCopy = $(this).clone().attr('href',index);
        olElement.append(elementCopy);
   });
});

这是做什么的：

查找页面上的每个ul元素。
找到它的兄弟姐妹＆＃34; ol＆＃34;元件。
遍历每一个＆＃34; li＆＃34;元素孩子的ul。
制作＆＃34; href＆＃34;新＆＃39; li＆＃39;的属性对象对象的INDEX。（或通过索引做任何你需要的事）
将此孩子复制到兄弟姐妹＆＃34; ol＆＃34;。

Answer 2

您应该通过each遍历ul元素。在回调中，this引用相应的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>");
  }
});

Answer 3

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

// 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);
    });
});

JS Fiddle demo

参考文献：

JavaScript的：
- Node.childNodes。
jQuery的：
- each()。
- find()。
- html()。
- replaceAll()。

对于每个<ul>，计算<li>标签并根据该数字创建元素</li> </ul>

3 个答案: