Question

我有一堆链接，其中的id与附加到其他链接的类相对应。我将链接ID作为变量传递，然后使用该变量按类查找其他链接。这是一个代码示例：

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

到目前为止，我能够做任何我想要的相关链接。但是，现在我想得到这些链接所在的div的ID。有没有办法使用JavaScript来查找链接的div id而不使用JQuery？

在你问之前，为什么不直接使用JQuery？我是新手，尚未学习JQuery。此外，在我尝试学习其他内容之前，我想了解如何在JavaScript中执行操作。

Answer 1

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

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

有关详细信息，请参阅此处：Getting the parent div of element

要查找最近的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>

Answer 2

您可以使用element.parentNode.id获取父元素的id属性。

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

2 个答案: