Writing to a non-unique div with Javascript

Question

Hi everyone,

<div class="aList">
<div class="theTitle"></div>
<div class="theContent"></div>
</div>

I'm building a multi-feed RSS reader for school.

aList is the div that encompasses each individual feed (the amount of feeds will fluctuate).

theTitle is the div that will be filled with the attribute of the current feed. Additionally, if clicked, it will load a list of attributes from the current feed into theContent.

I'm wondering how I can dynamically load the attributes into theContent when theTitle is clicked, since theContent and theTitle are going to be non-unique divs (I can't give them IDs).

Thanks for your help in advance,

-Andrew

Answer 1

document.getElementsByClassName('aList').getElementsByTagName('div')

Answer 2

You should look into jQuery selectors for that and other DOM Manipulation. Something like

$("div.theContent").attr("name", "value");

Answer 3

by using jquery, you may use code like the following:

 $(".theTitle").bind("click", function(){
    $el = $(this);
           $el.parent().$(".theContent").load('ajax/content.php?news=' . $el.text());
 });

this will make all your links clickable, an on click, update their corresponding content divs with the value of ajax/content.php?news=theTitle-value

Answer 4

You have to be able to determine which element you want to update if you don't want to update more than one. If the elements are grouped inside something else that does have an "id" value, you can take advantage of that.

Answer 5

<div class="aList">
<div class="theTitle" onclick="fillContentBox(this)"></div>
<div class="theContent"></div>
</div>

And in your script ...

function fillContentBox(div) {
  var theContentDiv = div.parentNode.getElementsByTagName("div")[1];
  // statements that do things with theContentDiv
}

Answer 6

Use a nice Javascript library such as Prototype or jQuery. Seems petty now, but these frameworks save you tons of time in the long run.

In both frameworks, you can select that div with:

$('div.theTitle')

With jQuery, you can do:

$('div.theTitle').click( function() {
    var title = $(this).text();
    var contentDiv = $(this).siblings('div.theContent');
    // Do something with contentDiv and the title
} );

This will make every theTitle div have an onClick event that does something with its associated theContent div.