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 中做事。

4

2 回答 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>
于 2013-03-09T04:54:04.347 回答
0

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

于 2013-03-09T04:56:23.790 回答