How to get the Previous Sibling name

问题

I need to get the name of the previous sibling . to keep it simple i have some sample code

<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>

Edit:

<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>

The Ist row is the previous sibling of the second row. I want the name of the 1st row and all my ids will be dynamic

thanks

回答1:

Using jQuery it would be:

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

With regular javascript you would need to use the following function (to ensure whitespace nodes are ignored)

getPreviousSiblingName(document.getElementById("item2"))

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

回答2:

That's because more likely your previousSibling will be a text node and not an element node. You need previousElementSibling (where supported) or a loop that will get the previousElement until the nodeType will be 1 (Node.ELEMENT_NODE).

In addition, name is not applying to p element (see https://developer.mozilla.org/en/DOM/Element.name) it could be better if you use a custom attribute (like an HTML5 data-* attribute, in your case data-name maybe) and therefore use dataset to get the attribute's value, or a generic getAttribute.

Of course library like jQuery can help to abstract all those things, the explanation is related to just vanilla JavaScript.

来源：https://stackoverflow.com/questions/10924086/how-to-get-the-previous-sibling-name

标签

javascript

html

simple-html-dom

dom