Question

我怎么能说我有一个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中的那些项目。并且在某处会有另一个按钮，这样当您点击这些项目时就会显示出来。

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

上面的代码段迭代了除列表的前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();

Answer 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()。

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

2 个答案:

编辑：