我有以下HTML标记:
<table>
<tr>
<th><label>Item Name</label></th>
<th><label>Quantity</label></th>
</tr>
<tr>
<td><input type="text" class="itemized-list-item" size="20"/></td>
<td><select>
<option class="quantity" value="1">1</option>
<option class="quantity" value="2">2</option>
<option class="quantity" value="3">3</option>
<option class="quantity" value="4">4</option>
<option class="quantity" value="5">5</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" class="itemized-list-item" size="20"/></td>
<td><select>
<option class="quantity" value="1">1</option>
<option class="quantity" value="2">2</option>
<option class="quantity" value="3">3</option>
<option class="quantity" value="4">4</option>
<option class="quantity" value="5">5</option>
</select>
</td>
</tr>
</table>
我尝试了以下操作来获取输入类型中的项目值和下拉列表中的选定数量选项:
var quantity;
var item;
$('.itemized-list-item').each(function() {
item = $(this).val();
quantity = $(this).next('.quantity:selected').attr('value');
}
我获取了项目值,但没有选择选项。
我已经尝试了很多方法几个小时但没有用。我希望有人可以解释我出错的地方。
干杯, NAV
答案 0 :(得分:4)
如果您要循环输入,那么获取相关选择元素的一种方法是从当前输入向上导航到最近的tr,然后再向下导航到选择:
var quantity;
var item;
$('.itemized-list-item').each(function() {
item = $(this).val();
quantity = $(this).closest('tr').find('select').val();
// do something with item and quantity
});
您对.next('.quantity:selected')
的使用不起作用,因为.next()
方法不搜索文档以查找下一个匹配元素,它只是选择紧随其后的兄弟 if 有一个,它与您提供的选择器匹配,否则不会选择任何内容。
答案 1 :(得分:1)
试试这个:
var quantity;
var item;
$('.itemized-list-item').each(function() {
item = $(this).val();
quantity = $(this).parent().next.find('.quantity:selected').attr('value');
}
答案 2 :(得分:1)
var quantity,
item;
$('.itemized-list-item').each(function() {
item = this.value;
quantity = $(this).parent().next().find('select').val();
});