javascript - 通过 div 进行 foreach

Question

我在通过以下构造循环时遇到了一些麻烦：

<div id="items">
    <p id="test1">
        <select  name="1" id="1"><option>A</option><option selected>B</option></select>
        <input type="text" name="to" id="to">
        <input type="text" name="away" id="awy">
    </p>
    <p id="test2">
        <select  name="2" id="2"><option>A</option><option selected>B</option></select>
        <input type="text" name="to" id="to">
        <input type="text" name="away" id="awy">
    </p>
    <p id="test3">
        <select  name="3" id="3"><option>A</option><option selected>B</option></select>
        <input type="text" name="to" id="to">
        <input type="text" name="away" id="awy">
    </p>
</div>

我需要运行 test1、test2 和 test3 并读取所选选项和文本字段的值（选择、到、离开）。如果我在例如 test1 中只有一件事，那么执行此操作对查询没有问题：

$('#items').children('p').each(function () {...}

但是，如果我添加两个文本字段并想为每个测试（1-3）执行此操作，我不知道......

任何想法？谢谢！

Answer 1

Id 应该代表 DOM 中的唯一项。改用类，如下所示：

<input type="text" name="to" class="to">
<input type="text" name="away" class="awy">

Answer 2

注意：首先给出所有元素的唯一 ID。

以下代码可能会对您有所帮助。

$(‘p’).each(function(index){
this.children().get(0).val();

//now do for second and third also
}

Answer 3

这个怎么样？

$('#items').find('select option:selected, input:text').each(function(){
      alert($(this).val()); //Value of each selected option and text field within the div
});

Answer 4

你甚至不需要做这.children部分。

尝试这个：

$('#items > p').each(function () {
    // you can then use $(this) to reference the currently iterated p element.
    // such as $(this).find('input[type="text"]:first');
    // or
    // $(this).find('input[type="text"]:last');
});