logo标签列表

如何在没有使用JQuery的情况下获取一组DIV ID

javascriptclasshtml
4

我有一堆链接，它们的id与其他链接附加的类相对应。我将链接id作为变量传递，然后使用该变量在JavaScript中通过类查找其他链接。以下是代码示例：

    var elements = document.getElementsByClassName(id);
    for(var i=0; i<elements.length; i++){}

到目前为止，我可以自由地处理与链接相关的任何内容。但是，现在我想获取包含这些链接的div的id。有没有办法在不使用JQuery的情况下使用JavaScript查找链接所在的div id？

在您询问之前，为什么不使用JQuery？我是新手，还没有学习JQuery。此外，我想在尝试学习其他东西之前先了解如何在JavaScript中完成任务。

原则上，您的元素应该具有id方法才能被调用。您尝试过这个吗？ - Jonathan Allard
它具有链接的id。是否有一种简单的方法也调用div id？ - parap
是的，您可以沿着 DOM 树向上遍历。 - Hogan
链接位于您想要的 div 中，因此它是 linkElement.parentNode.parentNode...。 - HMR
如果链接在 div 中的段落内，那么我需要向上遍历两个步骤才能到达我的 div 吗？即 this.parentNode.parentNode。 - parap
2个回答
2

要访问父元素的ID，您可以使用：

var elementId = elements[i].parentNode.id;

更多信息请参见：获取元素的父 DIV 元素

要查找最近的 DIV 父元素，您可以尝试以下方法：

var elements = document.getElementsByClassName(id);
for(var i=0; i<elements.length; i++){
    var parent = elements[i].parentNode;

    while (parent.localName != null && parent.localName.toLowerCase() != "div") {
        parent = parent.parentNode;
    }

    if (parent != null && parent.id != null) {
        var parentId = parent.id;

        alert(parentId);
    }
}

编辑：刚刚添加了一些空值检查，以防一个类没有包含在任何 DIV 中。

这是我使用的测试：

<html>
<body>
    <div id="asdf">
        <a href="#" class="blah">1</a>
        <a href="#" class="blah">2</a>
    </div>
    <div id="asdf2">
        <span>
            <a href="#" class="blah">3</a>
            <a href="#" class="blah">4</a>
        </span>
    </div>
    <!-- These two won't cause an alert since no DIV surrounds them -->
    <a href="#" class="blah">5</a>
    <a href="#" class="blah">6</a>
    <div id="asdf3">
        <span>
            <a href="#" class="blah">7</a>
            <a href="#" class="blah">8</a>
        </span>
    </div>

    <input type="button" onclick="run();return false;" value="Run" />

    <script>
    // This will cause 6 alerts: asdf, asdf, asdf2, asdf2, asdf3, asdf3
    function run() {
        var elements = document.getElementsByClassName("blah");
        for(var i=0; i<elements.length; i++){
            var parent = elements[i].parentNode;

            while (parent.localName != null && parent.localName.toLowerCase() != "div") {
                parent = parent.parentNode;
            }

            if (parent != null && parent.id != null) {
                var parentId = parent.id;

                alert(parentId);
            }
        }
    }
    </script>
</body>
</html>
如果 div 不是父元素怎么办？ - Hogan
你回答中唯一让我不满意的是我只能给你一个赞。完美。 - parap
0
如果 div 不是父元素怎么办？ - Hogan
@Hogan：然后您可以重构HTML，这样就不必在树上上下奔波了。 - Blender
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接