Get every UL element's ID for a specific class

Goal: Get a specific HTML element ul's id value from a ul class called SBUpdater

Purpose: My program contains several server url's and parses specific information that I need from each server url. Each id of a ul contains the value of a server url. I need to take this ID value so i can update that specific ul tag and update the content on the screen (without refreshing the page).

In a php file I have the following: Example Code:

<ul id="http://server1.com" class="SBUPdater">
   <li> ... </li>
</ul> 

<ul id="http://server2.com" class="SBUPdater">
   <li> ... </li>
</ul>

All I need is a method of getting this id value from the ul tags. Known:

• Tag = ul
• Class = SBUpdater
• ID = ?

What I would like is to retrieve every ul's id value, take all ul id's, perform a function with them, and then repeat the 开发者_高级运维process every 10 seconds.

You can use .map(), though your IDs are invalid, like this:

var idArray = $(".SBUPdater").map(function() { return this.id; }).get();

I'd use a data attribute though, like this:

<ul data-url="http://server1.com" class="SBUPdater">

And script like this:

var urlArray = $(".SBUPdater").map(function() { return $(this).attr("data-url"); }).get();

Or, if you're on jQuery 1.4.3+

var urlArray = $(".SBUPdater").map(function() { return $(this).data("url"); }).get();

With prototype library you would do this:

$$('.SBUPdater').each(function(){
    new Ajax.PeriodicalUpdater(this, this.getAttribute('data-url'), {
        frequency: 10 // every 10 seconds
    });
});

Each ul element would use the data-url (not id) attribute to hold the URL of your server script. That script would then return the new content of the appropriate ul element.

_{Thanks to Nick Craver for excellent suggestion}

$('ul.SBUPdater').each(function(){
    alert(this.id);
});

Hmm maybe something like this:

var urls = new Array();
var count = 0;
$('.SBUPdater').each(function() {
  urls[count] = $('.SBUpdater').attr('id');
  count++;
}
for(var i = 0; i < count; i++) {
  //do something with urls[i];
}

It could even be inside of the each function.

setInterval( function(){
  $('ul.SBUPdater').each(function(){
    // use this.id
    console.log(this.id);
  })
}, 10000 );

this should do it..

In jQuery this would be as easy as:

var ids = $('.SBUPdater').map(function(el) {
  return el.id;
});

console.log(ids); // ids contains an array of ids

To do something with those ids every 10 seconds you could setInterval:

window.setInterval(function() {
  $.each(ids, function(id) {
    console.log(id);
  });
}, 10 * 1000);

EDIT:

function GetULs() {
 var ULs = document.getElementsByTagName("UL");
 var IDs = new Array();
 for(var i = 0; i < ULs.length; i++) {
  if(ULs[i].className == "SBUPdater") {
   IDs.push(ULs[i].id);
  }
 }
 return IDs;
}

This function will return an array of all of the element IDs that you are looking for. You can then use that array for whatever you need.