Getting the Id from a tag 1

[JBorges]

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

http://somelink_1.html'

id='mr'>+</a> some pseudo text some pseudo text<a href='

http://somelink_2.html'

id='mr'>+</a> some pseudo text some pseudo text<a href='

http://somelink_3.html'

id='mr'>+</a>
</vs>

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

http://somelink_4.html'

id='mr'>+</a> some pseudo text some pseudo text<a href='

http://somelink_5.html'

id='mr'>+</a> some pseudo text some pseudo text<a href='

http://somelink_6.html'

id='mr'>+</a>
</vs>

 

[jpadie]

if you are using jQuery, this is easy

$(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)

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);
  }
}

 

[ChrisHirst]

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

 

[jpadie]

first line is wrong. should be

var vss = ...

<how i wish there were an edit function>

 

[feherke]

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

 

[jpadie]

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.

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);
    }
}

 

[JBorges]

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