javascript - get each div id in for loop - Stack Overflow

admin管理员组

文章数量:1401669

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.

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>

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.

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>

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 23, 2018 at 9:23 SapuSeven 1,5631818 silver badges3131 bronze badges asked Aug 23, 2018 at 9:11 vvv0idvvv0id 3377 bronze badges 2

• 1 Provide your html code as well – Narendra Jadhav Commented Aug 23, 2018 at 9:13
• 1 i guess you ask about how to get id for each div, right? – david Commented Aug 23, 2018 at 9:13

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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 :

[...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 :

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

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

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

refs:

https://api.jquery./attr/

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

$('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

Wele to Stack Overflow

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

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

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./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./map/

Within $.fn.each, you can access the current element id with this.id or with the parameter element.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);
});

本文标签： javascriptget each div id in for loopStack Overflow