Find an achor in a Div with javascript

Question

In javascript I have a reference to a div. In that div is an anchor element with a name='foundItem'

How do I get a reference to the anchor with the name foundItem which is in the Div I have the reference of?

There are 'many' foundItem anchors in other divs on the page. I need 'this' DIVs one.

It's for the web site http://BiblePro.BibleOcean.com

Answer 1

Using jquery, it's dead easy:

<script type="text/javascript">

$(function(){    
    var item = $("#yourDivId a[name=foundItem]")
)};
</script>

Update:

As per the comments, if you have control over what to id/name/class your anchor tag/s, it would be best to apply a class to them:

<div id="firstDiv">
    <a href="someurl.htm" class="foundItem">test</a>
</div>
<div id="secondDiv">
    <a href="someOtherUrl.htm" class="foundItem">test another one</a>
</div>
<!-- and so forth -->

<script type="text/javascript">

$(function(){    
    var item = $("#firstDiv a.foundItem");
    alert(item.html()); // Will result in "test"

    var item2 = $("#secondDiv a.foundItem");
    alert(item2.html()); // Will show "test another one"

)};
</script>

If you're doing anything with javascript, jQuery saves you tons of time and is worth investing the effort to learn well. Start with http://api.jquery.com/browser/ to get an intro to what's possible.

Answer 2

Use a JavaScript library like jQuery and save yourself time.

var theAnchor = $('#divId a[name=foundItem]');

Answer 3

// assuming you're not using jquery or mootools 
// assume div is mydiv
var lst = mydiv.getElementsByTagName('a');
var myanchor;
for(var i=0; i<lst.length; ++i) {
    if(lst[i].name && lst[i].name == 'foundItem') {
     myanchor = lst[i];
     break;
    }
}


// the mootools method
var myanchor = $(mydiv).getElement('a[name=foundItem]');

Answer 4

You can use the getElementsByTagName method to get the anchor elements in the div, then look for the one with the correct name attribute:

var found = null;
var e = divReference.getElementsByTagName('A');
for (var i=0; i < e.length; i++) {
  if (e[i].name && e[i].name == 'foundItem') {
    found = e[i];
    break;
  }
}

If found is not null, you got the element.

If you happen to use the jQuery library, you can let it do the searching:

var found = null;
var e = $(divReference).find('a[name=foundItem]');
if (e.length == 1) found = e.get(0);