javascript - 访问 ul 列表中的元素

Question

我有以下列表层次结构：

<ul id="ulid">
    <li><a><div class="mydiv">content</div></a></li>
    <li><a><div class="mydiv">content</div></a></li>
    ...
</ul>

我想向 div 添加一些 css 规则，这是我迄今为止尝试过的：

var myul = document.getElementById("ulid");
var myli = myul.getElementsByTagName("li");
for(var i = 0; i < myli.length; i++) {
    //myli[i].parentNode.style.display = "none"; // that works
    var links = myli[i].getElementsByTagName("a");
    for(var ii = 0; ii < links.length; ii++) {
        links[ii].parentNode.style.display = "none"; // doesnt work
    }
}

我可以隐藏这些li项目，但不能这样做，a所以我无法到达 div。我在这里做错了什么？

编辑：getElementsByClassName似乎不适用于油脂猴脚本，因为它只适用于 Emmanuel N 的小提琴。

Answer 1

您的代码确实有效，但我认为它并没有达到您的预期。最后一行：links[ii].parentNode.style.display = "none" 实际上会隐藏a标签（即li）标签的父节点，而不是div。parentNode 将向上一级，而不是向下一级。

与其尝试获取 myli[i].getElementsByTagName("a") 然后向下处理到 div，不如使用 myli[i].getElementsByTagName("div")，然后简单地执行以下操作：

var myul = document.getElementById("ulid");
var myli = myul.getElementsByTagName("li");
for(var i = 0; i < myli.length; i++) {
    //myli[i].parentNode.style.display = "none"; // that works
    var links = myli[i].getElementsByTagName("div");
    for(var ii = 0; ii < links.length; ii++) {
        links[ii].style.display = "none"; 
    }
}

当然，还有很多更有效的方法可以做到这一点。你已经在 div 上有了类名，所以

document.getElementsByClassName("mydiv");

也可以。

或者，如果你使用 jQuery，你可以做同样的事情而不必显式地迭代：

$("div.mydiv").css(etc.); // style this however you want

Answer 2

如果您不反对使用 jQuery，以下内容将为您隐藏 div。

$(document).ready(function () {
    var myDivs = $('div.mydiv');
    for(var eachDiv in myDivs) {
        $(eachDiv).hide();
    }   
 });

Answer 3

您的代码似乎有效。看看这个小提琴

  var myul = document.getElementById("ulid");
  var myli = myul.getElementsByTagName("li");
  for(var i = 0; i < myli.length; i++) 
  {
       var links = myli[i].getElementsByTagName("a");
       for(var ii = 0; ii < links.length; ii++) 
       {
              links[ii].parentNode.style.display = "none";
       }
  }