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

Question

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

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

В PHP файл я следующее: Пример кода:

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

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

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

• Тэг =
уль
• Класс = SBUpdater
• ID =?

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

Answer 1

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

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

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

_{Благодаря Ник Craver за отличное предложение}

Answer 2

Вы можете использовать .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 3

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

Answer 4

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

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

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

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

Answer 7

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

<input id="address-1" type="hidden" name="address1" value="http://something.com/first.html" /> 
<ul class="SBUpdater">...</ul> 
<input id="address-2" type="hidden" name="address2" value="http://something.com/second.html" /> 
<ul class="SBUpdater">...</ul> 
... 

Кроме того, использование setInterval должно быть обескуражено из-за некоторых проблем, связанных с браузером. В этом случае с 10-секундной задержкой не должен быть, но я все равно избегу этого.

setTimeout(doUpdate, 10000); 

function doUpdate() 
{ 
    $('.SBUpdater').each(function(index, element){ 
    var url = $('#address-' + (index + 1)).val(); 
    //do stuff with the url 
    }); 

    setTimeout(doUpdate, 10000); 
} 

Answer 8

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

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