在for循环中获取每个div id

In a for loop based on divs count I need to select each div child so I got to get the id of the div.

在基于div计数的for循环中,我需要选择每个div子,所以我得到了div的id。

this is what I have tried:

这是我试过的:

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>

5 个解决方案

#1

You can use a loop like this (basic example):

您可以使用这样的循环(基本示例):

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

refs:

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

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

#2

Within $.fn.each, you can access the current element id with this.id or with the parameter element.id.

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

Keep in mind that $() will give you a collection. You can write your code like this:

请记住,$()会为您提供一个集合。您可以像这样编写代码:

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

#3

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

this will run for each target match . in your case 'div' is your target . you can use find , child attribute for sub search

这将针对每个目标匹配运行。在你的情况下'div'是你的目标。您可以使用find,子属性进行子搜索

#4

Disclaimer : I know the question is about jquery, but I would like to provide the non-jQuery version :

If you just want the IDs in a list, you can use this :

如果您只想要列表中的ID,可以使用:

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

Or if you need to loop over them and do some processing for each, you can use this :

或者如果你需要遍历它们并为每个处理它们,你可以使用:

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

#5

Welcome to Stack Overflow

欢迎使用Stack Overflow

You need to use map function here in order to collect ID or value inside the textbox.

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

Here is an example to get 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>

Using .map() function you can also collect value form each element inside div :

使用.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>

refs: http://api.jquery.com/map/