在列表中的第 5 个 <li> 之前添加一个 <div> 并在最后一个 <li> 之后添加另一个 </div>？答案

【问题标题】：add a <div> before 5th <li> and add another </div> after the last <li> from a list?在列表中的第 5 个 <li> 之前添加一个 <div> 并在最后一个 <li> 之后添加另一个 </div>？
【发布时间】：2009-07-07 02:57:40
【问题描述】：

我怎样才能说我有一个 17 项的无序列表。所以现在我想在第 5 项之前添加一个 div 标签，而结束 div 将在列表的最后一项之后。结果看起来像这样。

      <ul>
        <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<div>
        <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</div>
      </ul>

我不能硬编码，因为这个列表将由 php 函数生成。有什么办法吗？谢谢

补充说：我正在尝试隐藏 div 中的那些项目。并且在某处会有另一个按钮，因此当您单击这些项目时会显示出来。

【问题讨论】：

提示“使用 jQuery”回答团队...
这不是有效的 HTML，您不能将 LI 的父级作为 DIV
@Jim：你这么说好像是件坏事；）
@slace：我知道这不是一个有效的方法。但我想知道是否可能。
它无效，因此很可能会被忽略，或者根本不适合您尝试做的任何事情。

标签： javascript list

【解决方案1】：

您似乎正在尝试将一些常见功能（或者可能是样式？）与 <ul> 中的所有但第一个 4 项相关联。也许您可以使用 class 属性或其他什么来代替？

我不知道你想要达到什么目标，但这样的事情可能会有所帮助：

var ul = //...
var items = ul.getElementsByTagName("li");
for (var i = 4; i < items.length; i++) {
    // do whatever you need to do here, e.g.:
    items[i].className += " foo";
}

上面的 sn-p 遍历列表的前 4 个元素以外的所有元素。（如果你给<ul>一个ID，你可以使用document.getElementById()来找到它。

编辑：

好的，我知道您希望能够切换这些项目的可见性。我建议不要将项目包围在<div> 中，而是使用我的回答中描述的技术首先隐藏列表项，然后在单击按钮时执行类似的操作。

我可能会将项目查找逻辑放在一个函数中：

function getListItemsOfInterest() {
    var ul = //...
    var allItems = ul.getElementsByTagName("li");
    var items = [];
    for (var i = 4; i < allItems.length; i++) {
        items.push(allItems[i]);
    }
    return items;
}

然后只需遍历返回的数组来执行显示/隐藏逻辑。

不出所料，我也会推荐你看看jQuery（不知道你能不能用）。它往往使这种事情变得容易得多。例如，您可以通过以下方式实现上述所有目标：

$("ul>li:gt(3)").show();

【讨论】：

是的，我是一个沉思 jquery 的其他东西，你的方式是有意义的，并保持 html 的有效性。谢谢你。

【解决方案2】：

虽然您尝试做的事情本身就是错误的，但我只是在这里回答问题。使用这个（这很不言自明）：

function insertDiv(){
    var d = document.createElement('div'), i=2, e = document.getElementsByTagName('li')[i];
    while(e){
        d.appendChild(e.cloneNode(true));
        e.parentNode.removeChild(e);
        e = document.getElementsByTagName('li')[i];
    }
document.getElementsByTagName('ul')[0].appendChild(d);
}

其中i 是您要开始的标签号。这不是for 循环的原因是每次删除元素时，长度都会减少。如果ul 不是唯一的，请给它一个ID 并改用document.getElementById()。

【讨论】：