jQuery перебирает объект и ищет заголовок, но пропускает другие

ProgramBox

jQuery перебирает объект и ищет заголовок, но пропускает другие

Post author:admin
Запись опубликована:10 мая, 2023
Post category:Вопросы по программированию

#jquery #loops #html-table #skip

#jquery #циклы #html-таблица #пропустить

Вопрос:

Я сам изучал JS и Jquery, и мне все еще трудно понять, как эффективно использовать $ для перебора объекта и извлечения нужной информации.

У меня есть таблица со значком флага и заголовком, описывающим, что я хочу поместить в конец строки. Однако иногда есть другие значки, которые я должен игнорировать. Итак, я ищу «флаг» в URL, и если он существует, я устанавливаю innerHTML со 2-й по последнюю ячейку в ‘title’.

Как вы можете видеть ниже, мне пришлось создать переменную уменьшения, чтобы не переходить к следующей строке с «title», если я столкнусь со значком без флага.

Я хочу, чтобы к этой строке добавлялся «title», который является местоположением:

 <td>11:44pm</td><td><a href="/stats/visitors?site_id=66351439amp;amp;date=2011-04-27amp;amp;country=the united states"></a></td><td> <a class="custom" title="Comcast Cable" href="/stats/visitors?site_id=66351439amp;amp;date=2011-04-27amp;amp;ip_address=75.70.103.23">Comcast Cable</a></td><td><a href="/stats/visitors-actions?site_id=66351439amp;amp;date=2011-04-27amp;amp;session_id=228613269">1 action</a></td><td>10s</td><td width="100%"> amp;nbsp; </td><td></td>

Чтобы выглядеть так:

 <td>11:44pm</td><td><a href="/stats/visitors?site_id=66351439amp;amp;date=2011-04-27amp;amp;country=the united states"></a></td><td> <a class="custom" title="Comcast Cable" href="/stats/visitors?site_id=66351439amp;amp;date=2011-04-27amp;amp;ip_address=75.70.103.23">Comcast Cable</a></td><td><a href="/stats/visitors-actions?site_id=66351439amp;amp;date=2011-04-27amp;amp;session_id=228613269">1 action</a></td><td>10s</td><td width="100%">Aurora, CO, USA</td><td></td>

Итак, мой вопрос — Как лучше выполнить всю эту процедуру. Вот ссылка на jsfiddle — http://jsfiddle.net/ukJxH/78 — в 3: 47 вы можете увидеть значок без флага.

 var x = $('.tableborder tr img');
y = 1;
for (i = 0; i < x.length; i  ) {
    var flagg = x[i].src;
    var pattn = /flag/gi;
    var loca = x[i].title;

    if (flagg.match(pattn) == "flag") {
        //$('td:nth-child(6)')[i   14   y].innerHTML = loca;
        $('#main :nth-child(i) td:nth-child(6)')[i].innerHTML = loc } else {
    y = y - 1;
}

}

1. Я вижу значок флага на каждом элементе. Что не так? (В вашем jsfiddle css содержит много не css-кода, такого как html, js и предупреждения от firebug)

2. мое решение кажется слишком сложным. Основная проблема заключается в том, что есть значки без флага, которые я должен пропустить, и я делаю это, просматривая src для «флага», и если флаг, то я устанавливаю для внутреннего html значение ‘title’.

Ответ №1:

Извините, но я не уверен, что слишком хорошо понял ваш вопрос. Однако следующий селектор предоставит вам все флаги в таблице

 $('.tableborder tr img[src*="flag"]').each(function(){
   $(this)
    .closest('td')
    .nextAll('td:last')
    .html('Title from image : '   $(this).attr('title'));
});

Это должно дать вам возможность просмотреть DOM и получить то, что вам нужно

Живая демонстрация:http://jsfiddle.net/jomanlk/ukJxH/87 /

1. Это немного сокращает его — Спасибо. Но как лучше всего поместить заголовок в ячейку в конце таблицы в столбце referrer?

2. @7null, о, это то, что ты хотел? Я обновил свой код. Как только он найдет изображение, он будет подниматься по дереву DOM, пока не достигнет TD, затем он будет искать последний TD и помещать заголовок изображения в последнюю ячейку. Надеюсь, это решит вашу проблему

3. Это идеально — спасибо. Обычно я могу взломать свой путь через это, но я хочу научиться сейчас определять лучшую / элегантную методологию. Вероятно, это довольно сложно сделать, поскольку это не моя повседневная работа, а скорее хобби.

4. @7null нет проблем 🙂 хорошее место для начала — просмотреть список селекторов на api.jquery.com. У них много! Позволяет очень легко находить объекты

Ответ №2:

Вы можете попробовать использовать каждый

Например:

 $(".tableborder tr img").each(function() {
   var src = $(this).attr("src");
   var alt = $(this).attr("alt");
});

Ответ №3:

Вы также можете использовать класс css для выбора только интересующих вас тегов img:

 $(".tableborder tr img.flagImg").each(function() {
   ...
});

HTML тогда был бы

 <img title="Arvada, CO, USA" class="flagImg" src="http://static.getclicky.com/media/flags/us.gif">