获取for循环中的每个div ID

Question

在基于div计数的for循环中，我需要选择每个div子对象，以便获取div的ID。

这是我尝试过的：

var json = [{
  'orderId': order,
  'attributes': [],
  'services': []
}];
var divLength = $('#stepchild div').length;
for (i = 0; i < divLength; i++) {
  var fields = {};
  $('#divID input').each(function() {
    fields[this.name] = $(this).val();
  })
  $('#divID select').each(function() {
    fields[this.name] = $(this).val();
  })
  json[0]['attributes'].push(fields);
}

<div id="form0">
  <input type="text" class="field1">
</div>
<div id="form1">
  <input type="text" class="field1">
</div>
<div id="form2">
  <input type="text" class="field1">
</div>

Answer 1

您可以使用这样的循环（基本示例）：

$('div').each(function()
{
    console.log($(this).attr('id'))
})

参考：

https://api.jquery.com/attr/

https://api.jquery.com/jQuery.each/

Answer 2

$('target').each(function()
{
  console.log($(this).attr('id'))
});

这将针对每个目标匹配进行。在您的情况下，“ div”是您的目标。您可以使用find，child属性进行子搜索

Answer 3

免责声明：我知道问题与jquery有关，但我想提供非jQuery版本：

如果您只想在列表中找到ID，则可以使用：

[...document.querySelectorAll('div')].map(div => div.id)

或者如果您需要遍历它们并对它们进行一些处理，则可以使用以下方法：

[...document.querySelectorAll('div')].forEach(div => {
    // process the div element here with div.id beeing the ID
});

Answer 4

欢迎堆栈溢出

您需要在此处使用map函数，以便在文本框中收集ID或值。

以下是获取ID的示例：

var json = [{
    'orderId': 'order',
    'attributes': [],
    'services': []
}];

function getDivID() 
{
            
    var values = $("#stepchild div").map(function (i, e) {
        return $(e).attr('id');
    }).get();


    json[0]['attributes'].push(values);

    console.log("json[0]['attributes'] is now : " + json[0]['attributes']);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="stepchild">
    <div id="form0">
        <input type="text" class="field1">
    </div>
    <div id="form1">
        <input type="text" class="field1">
    </div>
    <div id="form2">
        <input type="text" class="field1">
    </div>
</div>

<button onclick="getDivID()">Click here to get div ID</button>

使用.map()函数，您还可以从div中的每个元素收集值：

var json = [{
    'orderId': 'order',
    'attributes': [],
    'services': []
}];


function getValue() {

    var values = $("#stepchild input").map(function (i, e) {
        return $(e).val();
    }).get();


    json[0]['attributes'].push(values);

    console.log("json[0]['attributes'] is now : " + json[0]['attributes']);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="stepchild">
    <div id="form0">
        <input type="text" class="field1" value="abc">
    </div>
    <div id="form1">
        <input type="text" class="field1" value="xyz">
    </div>
    <div id="form2">
        <input type="text" class="field1" value="something">
    </div>
</div>
<button onclick="getValue()">Click here to get value</button>

参考： http://api.jquery.com/map/

Answer 5

在$.fn.each中，您可以使用this.id或参数element.id访问当前元素ID。

请记住，$()将为您提供一个收藏夹。您可以这样编写代码：

const json = [{
  'orderId': order,
  'attributes': [],
  'services': [],
}];

$('#stepchild div').each(function (index, element) {
  let fields = {};
  
  $(element).find('input, select').each(function () {
    fields[this.name] = $(this).val();
  });
  
  json[0]['attributes'].push(fields);
});