Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Getting the Id from a tag 1

Status
Not open for further replies.

JBorges

Technical User
Jan 12, 2009
57
DK
Hello.

I have some text that is nested within custom named tags, 'vs', and preceded by a bold tag with their own id. Now, I'd like to get the id of the 'b' tag when clicking any link in the 'vs' tags. Example, if I click on the first, second, or third link I'd like to get the id "2:1" and if I click on the fourth, fifth, or sixth link I'd like to get the id "2:2".

Is that possible? I've tried to include this line "document.getElementsByTagName('b').this.id" in the hyperlinks with an onclick function, but that doesn't retrieve the id.

<b id="2:1">1 </b>
<vs>some pseudo text some pseudo text some pseudo text<a href=' id='mr'>+</a> some pseudo text some pseudo text<a href=' id='mr'>+</a> some pseudo text some pseudo text<a href=' id='mr'>+</a>
</vs>

<b id="2:2">2 </b>
<vs>some pseudo text some pseudo text some pseudo text<a href=' id='mr'>+</a> some pseudo text some pseudo text<a href=' id='mr'>+</a> some pseudo text some pseudo text<a href=' id='mr'>+</a>
</vs>
 
if you are using jQuery, this is easy

Code:
$(document).ready(function(){
 $('vs a').on('click', function(e){
  e.preventDefault();
  alert(($this).closest('b').attr(id));
 });
});

if not then you will have to build a DOM node traversal script. something like this (untested - bind it to window on load or locate it at the foot of your script)
Code:
var vs = document.getElementsByTagName('vs');
for(var i = 0; i<vss.length; i++){
  var links = vs.getElementsByTagName('a');
  for(var j = 0; j<links.length; j++){
    links[j].addEventListener('click',function(e){
      var curNode = e.currentTarget;
      do{
        var node = curNode.parentNode;
      }while(node.tagName != 'B');
      alert('id = ' + node.getAttribute('id');
    }, false);
  }
}
 


JavaScript:
this.parentNode.id

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
first line is wrong. should be
Code:
var vss = ...

<how i wish there were an edit function>
 
Hi

Chris, maybe [tt]this.parentNode[highlight].previousSibling[/highlight].id[/tt]. But such simple approach may fail in other browsers than Trident ( where iterating over runs of whitespaces between adjacent tags is impossible ).


Feherke.
feherke.ga
 
reposting a proper tested solution as mine had bugs and i had not seen that the <b> element was not a parent of the <a>
again - hook this into onload or locate at the foot of the page.
Code:
var vss = document.getElementsByTagName('vs');
for (var i = 0; i < vss.length; i++) {
    var links = vss[i].getElementsByTagName('a');
    for (var j = 0; j < links.length; j++) {
        links[j].addEventListener('click', function(e){
            e.preventDefault();
            var curNode = e.currentTarget;
            while( curNode.tagName.toLowerCase() != 'vs'){
                curNode = curNode.parentNode;
                if(curNode === null) return;
            }
            while(typeof curNode.tagName == 'undefined' || curNode.tagName.toLowerCase() != 'b'){
                if(curNode === null) return;
                curNode = curNode.previousSibling;
            }
            alert('ID is ' + curNode.getAttribute('id'));
        }, false);
    }
}
 
@jpadie

Thanks for the code. I got it to work just fine. I've tested the code in Safari and Chrome and it works great. The plan is to include it in one of my iOS apps running mobile safari; its webview. I nested the function in a window.onload=function(){}, just in case others were wondering about this.

@feherke
I don't know if the administrators could edit these duplicate posts so that both yours and jpadies working solutions could be nested in just one post. You seem to be a very able programmer who has posted a lot of helpful answers in this forum, perhaps you can inform the administrators of this forum or something to that effect. :)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top