简单的第一个孩子js？答案

【问题标题】：Simple first-child js?简单的第一个孩子js？
【发布时间】：2010-04-27 07:08:29
【问题描述】：

搜索一个简单的通过 javascript 检测第一个孩子（无框架）。

它应该为元素的第一个子元素添加类“first”。就像 ie 的 css-hacks，但在 javascript 和 html 文件中。

必须类似于:first-child

当我说没有框架时，我的意思是一些这样的代码：

<script type="text/javascript">document.documentElement.id = "js"</script>

例如：

<div class="terms">
    <dl>
        <dt>Term 1 name</dt>
        <dd>Term 1 description</dd>
    </dl>
    <dl>
        <dt>Term 2 name</dt>
        <dd>Term 2 description</dd>
    </dl>
    <dl>
        <dt>Term 3 name</dt>
        <dd>Term 3 description</dd>
    </dl>
</div>

三个<dl>，第一个包含Term 1。

这个 css 在 IE6 中不起作用，这就是为什么我正在寻找一个 javascript 解决方案。不允许使用 CSS 黑客。

.terms dl:first-child { float: right; }

【问题讨论】：

在什么情况下需要申请？加载时文档中已经存在的元素？动态添加的新项目？由给定类标识的元素，还是所有元素？
我以为直到最后一句话我才理解你的问题。 Javascript sn-p 应该做什么？
%Bears 会吃掉你，这个 javacsript 只是和示例“它应该是什么样子”。我没有框架，所以应该使用普通的javascript。
您可以使用“@”符号将评论定向到以前的 cmets 中的用户。这会导致直接通知用户评论有回复。此外，评论引擎的工作方式只需要在用户名中提供前几个唯一字符。所以@bears 足以回复“熊会吃掉你”。

标签： javascript css-selectors

【解决方案1】：

这将满足您的需求，但您确实需要在 div 中添加 id 以便于查找。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .terms { }
        .terms dl.first { float: right; }
    </style>
</head>
<body>
    <div id="terms" class="terms">
        <dl>
            <dt>Term 1 name</dt>
            <dd>
                Term 1 description</dd>
        </dl>
        <dl>
            <dt>Term 2 name</dt>
            <dd>
                Term 2 description</dd>
        </dl>
        <dl>
            <dt>Term 3 name</dt>
            <dd>
                Term 3 description</dd>
        </dl>
    </div>
</body>

<script type="text/javascript">

    function firstChild(element) {
        for (var i = 0; i < element.childNodes.length; i++) {
            var child = element.childNodes[i];
            if (child.nodeType == 1) {
                return child;
            }
        }
    }
    var terms = document.getElementById("terms");

    firstChild(terms).className += " first";

</script>

</html>

参考：

节点类型常量

元素节点：1 属性节点：2 文本节点：3 CDATA_SECTION_NODE：4 ENTITY_REFERENCE_NODE：5 实体节点：6 PROCESSING_INSTRUCTION_NODE：7 COMMENT_NODE：8 文档节点：9 DOCUMENT_TYPE_NODE：10 DOCUMENT_FRAGMENT_NODE：11 NOTATION_NODE : 12

【讨论】：

感谢天空桑德斯。有什么办法可以缩短吗？
@glister - 我看不到。实际上，如果有的话，这个 sn-p 可能应该更长一些，包括保护传入的元素实际上是一个 dom 元素等。根据我的经验，更短的被高估了。任何代码都需要明确目的。
好的，我稍后会尝试使用它并接受如果有效。再次感谢。
它是否为第一个子元素添加了一个类？
我建议先学习一点 JavaScript。不要盲目使用sn-ps，事先了解一下。否则，你就完蛋了。