Javascript 访问ul列表中的元素

我有以下列表层次结构：

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

var myul=document.getElementById（“ulid”）；
var myli=myul.getElementsByTagName（“li”）；
对于（变量i=0；i

我可以隐藏

li

项目，但对

a

不能这样做，因此我无法到达div。我在这里做错了什么

---

编辑：

getElementsByClassName

在greasemonkey脚本中似乎不起作用，因为它只在Emmanuel N的小提琴中起作用。

您的代码确实起作用，但我认为它没有达到您的预期效果。最后一行：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"; 
    }
}

这样也行

或者，如果您使用jQuery，则无需显式迭代即可执行相同的操作：

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

---

如果您不反对使用jQuery，下面将为您隐藏您的div

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

---

你的代码似乎有效。检查小提琴

var myul=document.getElementById（“ulid”）；
var myli=myul.getElementsByTagName（“li”）；
对于（变量i=0；i

如何：

var divs=document.getElementsByClassName（“mydiv”）

值得注意的是，

a

标记中的

div

标记是无效的标记。如果您正在寻找通用内联容器用户

span

。为什么总是使用

parentNode

？仅仅做

myul.getElementsByTagName（“div”）

（或者

“a”

，不确定你到底想要哪个）会有什么错呢？看起来效果不错，检查一下Fiddle我正在写一个greasemonkey脚本。也许这就是原因？也许这就是原因。

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

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