如何通过类名获得子元素?

我试图得到class = 4的子span。下面是一个示例元素:

<div id="test">
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
</div>

我可用的工具是JS和YUI2。我可以这样做:

doc = document.getElementById('test');
notes = doc.getElementsByClassName('four');

//or

doc = YAHOO.util.Dom.get('#test');
notes = doc.getElementsByClassName('four');

这些在IE中不起作用。我得到一个错误，对象(doc)不支持此方法或属性(getElementsByClassName)。我已经尝试了几个跨浏览器实现getElementsByClassName的例子，但我不能让他们工作，仍然得到了这个错误。

我认为我需要的是一个跨浏览器getElementsByClassName或我需要使用doc.getElementsByTagName('span')和循环，直到我找到类4。但我不知道该怎么做。

当前回答

我将使用jquery这样做的方式是这样的..

Var targetedchild = $("#test").children().find("span.four");

2013-07-17 06:22:48

其他回答

我将使用jquery这样做的方式是这样的..

Var targetedchild = $("#test").children().find("span.four");

2013-07-17 06:22:48

你可以试试:

notes = doc.querySelectorAll('.4');

notes = doc.getElementsByTagName('*');
for (var i = 0; i < notes.length; i++) { 
    if (notes[i].getAttribute('class') == '4') {
    }
}

2012-08-28 20:22:44

Let notes = document。querySelector(“#测试.four”)

2023-01-14 20:21:58

这是一个相对简单的递归解。我认为宽度优先搜索在这里是合适的。这将返回与找到的类匹配的第一个元素。

function getDescendantWithClass(element, clName) {
    var children = element.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].className &&
            children[i].className.split(' ').indexOf(clName) >= 0) {
            return children[i];
         }
     }
     for (var i = 0; i < children.length; i++) {
         var match = getDescendantWithClass(children[i], clName);
         if (match !== null) {
             return match;
         }
     }
     return null;
}

2014-10-09 14:11:31

另一种方式

const result = [...(parentElement.children)].find(child => {
  return child.classList.contains('some-class-name');
});

首先，我们展开NodeList的元素，将其转换为Array，以便使用find()方法。最后，find()将返回classList属性包含给定类名的第一个元素。

2021-10-15 02:29:27

如何通过类名获得子元素?

推荐文章

最新文章

标签