Получить идентификатор каждого элемента UL для определенного класса

Question

Цель: Получить значение идентификатора ul конкретного элемента HTML из класса ul с именем SBUpdater

Назначение: Моя программа содержит несколько URL-адресов серверов и анализирует конкретную информацию, которая мне нужна для каждого URL-адреса сервера. Каждый идентификатор ul содержит значение URL сервера. Мне нужно принять это значение идентификатора, чтобы я мог обновить этот конкретный тег ul и обновить содержимое на экране (без обновления страницы).

В php-файле у меня есть следующее: Пример кода:

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

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

Все, что мне нужно, - это метод получения значения id из тегов ul. Известно:

• Tag = ul
• Класс = SBUpdater
• ID =?

Я хотел бы получить значение id каждого ul, взять все ul ul, выполнить с ними функцию, а затем повторять процесс каждые 10 секунд.

Answer 1

Вы можете использовать .map(), хотя ваши идентификаторы недействительны, например:

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

Я бы использовал атрибут данных, например, так:

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

И такой скрипт:

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

Или, если вы используете jQuery 1.4.3 +

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

Answer 2

С библиотекой прототипов вы бы сделали это:

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

Каждый элемент ul будет использовать атрибут data-url (не id) для хранения URL-адреса вашего серверного скрипта. Затем этот скрипт возвращает новое содержимое соответствующего элемента ul.

_{Спасибо Нику Крейверу за отличное предложение}

Answer 3

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

Эта функция вернет массив всех идентификаторов элементов, которые вы ищете. Затем вы можете использовать этот массив для всего, что вам нужно.

Answer 4

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

это должно сделать это ..

Answer 5

Хм, может быть, что-то вроде этого:

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

Может быть даже внутри функции each.

Answer 6

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

Answer 7

В jQuery это было бы так просто:

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

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

Чтобы делать что-то с этими идентификаторами каждые 10 секунд, вы могли бы setInterval:

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