Question

我有以下HTML：

<ul id="sortable1 venuetags" class="connectedSortable">
   <li id="venuetagli">fried</li>
   <li id="venuetagli">garlic</li>
   <li id="venuetagli">rosemary</li>
   <li id="venuetagli">new potatoes</li>
</ul>

我正在尝试使用JQuery获取每个值：

$('#venuetagli').each(function(j,li) {
   console.log(j,li)
})

但是，从控制台我只得到第一个返回的值。

Answer 1

ids ~~应该是~~必须是唯一的，这就是你获得单个元素使用类选择器的原因。此外，UL的ID也没有空格。

HTML 的

<ul id="sortable1 venuetags" class="connectedSortable">
   <li class="venuetagli">fried</li>
   <li class="venuetagli">garlic</li>
   <li class="venuetagli">rosemary</li>
   <li class="venuetagli">new potatoes</li>
</ul>

的Javascript

$('.venuetagli').each(function(j,li) {
   console.log(j,li)
});

您可以使用父子选择器

简单地获取带有ul的li

$('#sortable1 li').each(function(j,li) {
   console.log(j,li)
});

仅用于测试且从不推荐的方式，您可以使用属性选择器获取具有相同id的元素。

$('[id=venuetagli]').each(function(j,li) {
   console.log(j,li);
});

Answer 2

Id必须分配给完整页面中的单个元素，否则它将仅返回其中一个元素或意外结果：

Here is demo with class

<ul id="sortable1 venuetags" class="connectedSortable">
   <li class="venuetagli">fried</li>
   <li class="venuetagli">garlic</li>
   <li class="venuetagli">rosemary</li>
   <li class="venuetagli">new potatoes</li>
</ul>

和jQuery：

$('.venuetagli').each(function(j,li) {
   console.log(j,li)
})

JQuery .each只返回一个<li> </li>

2 个答案: