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"> </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
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"> </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
Share Improve this question edited Jun 7, 2012 at 0:40 Zoha Ali Khan asked Jun 7, 2012 at 0:17 Zoha Ali KhanZoha Ali Khan 1,69913 gold badges39 silver badges56 bronze badges2 Answers
Reset to default 9Using 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;
}
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/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.