Question

我需要得到上一个兄弟姐妹的名字。保持简单我有一些示例代码

<html>

 <head>
   <script type="text/javascript">
     function myFunction()
     {
      var itm=document.getElementById("item2");  
      alert(itm.previousSibling.name);
     }
   </script>
 </head>

 <body>
  <p name='pn'>paragraph</p>
  <button id='item2' onclick="myFunction()">Try it</button>
 </body>
</html>

编辑：

<table id="sort">
    <tr name="nodrag nodrop">
        <td colspan=3><strong><a style="cursor:pointer;" class="toggle">Group 1</a></strong>  </td>
        <td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
    </tr>
    <tr id="1" class="tr_group"'>
        <td style="width:10px;" class="dragHandle">&nbsp;</td>
        <td><a href=# style="margin-left: 20px;">Umair Iqbal</a></td>
        <td><span style="font-size: 12px; color: #999; line-height: 100%;">A Student at TUM</span></td>
        <td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
    </tr>

Ist行是第二行的前一个兄弟。我想要第一行的名称，我的所有ID都是动态的

谢谢

Answer 1

使用jQuery将是：

$('#item2').prev().attr("name");

使用常规javascript，您需要使用以下函数（以确保忽略空格节点）

getPreviousSiblingName(document.getElementById("item2"))

function getpreviousSiblingName(element) {
    var p = element;
    do p = p.previousSibling;
    while (p && p.nodeType != 1);
    return p.attributes["name"].value;
}

Answer 2

那是因为您的previousSibling更有可能是文本节点而不是元素节点。您需要previousElementSibling（支持哪里）或获得previousElement的循环，直到nodeType为1（Node.ELEMENT_NODE）。

此外，name不适用于p元素（请参阅https://developer.mozilla.org/en/DOM/Element.name）如果您使用自定义属性（如HTML5 data-*属性，则可能会更好）在你的情况下data-name可能），因此使用dataset来获取属性的值，或使用通用的getAttribute。

当然，像jQuery这样的库可以帮助抽象所有这些东西，解释只与vanilla JavaScript有关。

如何获取Previous Sibling名称

2 个答案: