jQuery - Обход элементов списка для получения вложенных элементов и атрибутов.

Question

jQuery - Обход элементов списка для получения вложенных элементов и атрибутов.

0

Я опубликовал следующий сгенерированный html, где мне нужно выбрать определенные элементы. Например, мне нужно получить доступ и получить значения href во всех случаях, а также атрибуты src и alt элемента img.

<ul id="query" class="clicked inline">
   <li>
     <a class="filterterm" href="#">×</a>
     <span class="term">design</span>
   </li>
   <li>
     <a class="filterterm" href="http://www.askgraphics.com/">×</a>
     <span class="bingresult">Website design, Blog design and Web..</span>
     </li>
   <li>
     <a class="filterterm" href="http://www.askgraphics.com">
       <img class="imgresult" width="60px" border="1px" height="60px"    src="http://farm8.staticflickr.com/7423/13129389874_a07ced37ee_t.jpg" alt="Image">
     </a>
     <span class="imageterm"></span>
   </li>

Я пробовал с кодом вроде следующего, но не успел

 ('ul#query > li > .term').each(function(i,data){
        console.log(" Term Data"+data.text());            
      });

    });
    $('ul#query > li > img > .imgresult').each(function(i,data){
        console.log(" Image Data"+data);
      });

    });
    $('ul#query > li > .linkresult').each(function(i,data){
        console.log(" Link Data"+data.text());           
        });

    });
    $('ul#query > li > img > .videoresult').each(function(i,data){
        console.log(" Video Data"+data);           

    });

user2008973 13 март 2014, в 20:50

Источник

0

И какой вывод вы ожидаете или хотите, от этого HTML?
David Thomas 13 март 2014, в 19:04
0

Это сгенерированный html, как я вижу его из Firebug, откуда мне нужно получить доступ / получить значение href для каждого случая и пару {href, src} для последнего li с использованием jquery.
user2008973 13 март 2014, в 19:07

Теги:

jquery

html

dom

1 ответ

Ещё вопросы

И какой вывод вы ожидаете или хотите, от этого HTML?
Это сгенерированный html, как я вижу его из Firebug, откуда мне нужно получить доступ / получить значение href для каждого случая и пару {href, src} для последнего li с использованием jquery.

Palpatim · Answer 1 · 2014-03-13T18-43-00.000Z

Несколько проблем:

1) Множество синтаксических ошибок в вашем javascript и отсутствие закрывающего тега ul в вашем HTML. В следующий раз подумайте о публикации скрипта вместе с образцом кода и очистите свой код перед публикацией. Это поможет вам устранить проблему и облегчит вам помощь пользователям SO.

2) Метод jQuery each() передает элемент HTML, а не завершенный набор jQuery, в обработчик функции. Это означает, что такие конструкции, как data.text(), не работают. Вы можете либо преобразовать в завернутый набор jQuery:

console.log(" Term Data" + $(data).text());

или, предпочтительно, использовать свойство innerText или textContent самого элемента:

console.log(" Term Data" + data.textContent);

3) Ваши селекторы бесполезно специфичны и неправильно загружаются. В общем, используйте наименее специфичные селекторы, необходимые для того, чтобы получить нужные вам данные.

Новый образец кода (также скрипка)

$('.term').each(function (i, termEl) {
    console.log(" Term Data: ", termEl.textContent);
});

$('.imgresult').each(function (i, imgEl) {
    console.log(" Image Data: ", imgEl.src);
});

$('.linkresult').each(function (i, aEl) {
    console.log(" Link Data: ", aEl.textContent, aEl.href);
});

$('.videoresult').each(function (i, videoEl) {
    console.log(" Video Data: ", videoEl.href);
});

Спасибо большое за помощь. К сожалению, мой jQuery содержит много ошибок, потому что я только начал изучать и использовать его. Приведенный выше код частично работает. Я могу получить termEl.textContent и img.src, кроме как из videoEl.href, imgEl.href или aEl.href. Я думал о доступе таким же образом, определяя класс для каждого <a>, но мне нужно получить url и src (для изображений) или url и title (для ссылок) в виде пар. Как я могу обеспечить это? Еще раз спасибо за ваше время.