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似乎没有使用greasemonkey脚本，因为它只是在Emmanuel N的小提琴中起作用。

Answer 1

您的代码确实可以正常运行，但我认为它并不符合您的意图。最后一行：links [ii] .parentNode.style.display =“none”实际上会隐藏a标签（即li）标签的父节点，而不是div。 parentNode将向上一级，而不是向下。

而不是试图获取myli [i] .getElementsByTagName（“a”）然后向下工作，为什么不是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

您的代码似乎有效。查看this小提琴

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

访问ul列表中的元素

3 个答案: