Question

我已经发布了以下生成的html，我需要从中选择特定的元素。例如，我需要在所有情况下访问并获取href的值以及img元素的src和alt属性。

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

    });

Answer 1

几个问题：

1）您的javascript中存在大量语法错误，并且HTML中缺少结束ul标记。下次，考虑发布一个小提琴和代码示例，并在发布之前清理代码。它可以帮助您解决问题，并让SO上的人们更容易帮助您。

2）jQuery的each()方法将HTML元素（而不是jQuery包装集）传递给函数处理程序。这意味着像data.text()这样的结构不起作用。您可以转换为jQuery包装集：

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

或者，最好使用元素本身的innerText或textContent属性：

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

3）你的选择器是不必要的特定，并且不正确启动。通常，使用必要的最少特定选择器来获取所需的数据。

新示例代码（也是a fiddle）

$('.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 - 遍历列表元素以获取嵌套元素和属性

1 个答案: