How to loop through nested HTML div elements using jQuery

Question

I have a nested HTML div elements in my web page. I have data read from a JSON file into a variable.

EX: obj will be an array of objects with the following properties. Name, Progress, Description and Status so that each item is accessible this way

obj[index].Name
obj[index].Progress
obj[index].Description
obj[index].Status

I need to loop through each div elements and set the data. How do I do this using jQuery.

For ex: I need to loop through each info-box inside the div(#row) And set the values inside the following HTML elements

 - <span class="info-box-text">NAME-1</span>
 - <div class="progress-bar" style="width: 70%"></div>
 - <span class="progress-description">PRODUCT-DESCRIPTION-1                            </span>
-  <span class="label label-info">PROGRESS-1</span>

The jQuery each function should loop through the following HTML

<div class="row">
       <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <div class="info-box bg-yellow">
                    <span class="info-box-icon"><i class="ion ion-filing"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">NAME-1</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 70%"></div>
                        </div>
                        <span class="progress-description">
                            PRODUCT-DESCRIPTION-1
                        </span>
                        <span class="label label-info">PROGRESS-1</span>
                        <span style="padding-left:5px" class="ion-person-stalker">&nbsp;5</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <div class="info-box bg-green">
                    <span class="info-box-icon"><i class="ion ion-filing"></i></span> 
                    <div class="info-box-content">
                        <span class="info-box-text">NAME-2</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 85%"></div>
                        </div>
                        <span class="progress-description">
                         PRODUCT-DESCRIPTION-2
                        </span>
                        <span class="label label-success">PROGRESS-2</span>
                        <span style="" class="ion-person-stalker">&nbsp;8</span>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <div class="info-box bg-red">
                    <span class="info-box-icon"><i class="ion ion-filing"></i></span> 
                    <div class="info-box-content">
                        <span class="info-box-text">NAME-3</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 70%"></div>
                        </div>
                        <span class="progress-description">
                            PRODUCT-DESCRIPTION-3
                        </span>
                        <span class="label label-success">PROGRESS-3</span>
                        <span style="" class="ion-person-stalker">&nbsp;15</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
            </div>
        </div>
   </div>

you can use a handle bar js.. Which solves this simply and you can simplify your code also — Arumuga Raja
– Arumuga Raja, Commented Mar 29, 2016 at 8:26
Assuming that each object will have the same HTML structure maybe try using a Javascript templating engine like EJS (embeddedjs.com). I've used it before to do something very similar and found that it works great — Draco
– Draco, Commented Mar 29, 2016 at 8:26

peyman azizi · Accepted Answer · 2016-03-29 09:54:26Z

if You want read properties from html to JSON object you can do this : for see result please see the console

$(function(){
  var obj = {};
  for(var i=0;i<$('.item').length;i++){
    obj[i] = {
      Name : $('.item').eq(i).find('.info-box-text').html(),
      Progress : $('.item').eq(i).find('.progress-bar').html(),
      Description : $('.item').eq(i).find('.progress-description').html(),
      Status : $('.item').eq(i).find('.status').html()
    }
    
  };
  console.log(obj);
  
})

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="row">
       <div class="col-md-3 col-sm-6 col-xs-12 item">
            <div class="info-box">
                <div class="info-box bg-yellow">
                    <span class="info-box-icon"><i class="ion ion-filing"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">NAME-1</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 70%">70</div>
                        </div>
                        <span class="progress-description">PRODUCT-DESCRIPTION-1</span>
                        <span class="label label-info status">PROGRESS-1</span>
                        <span style="padding-left:5px" class="ion-person-stalker">&nbsp;5</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12 item">
            <div class="info-box">
                <div class="info-box bg-green">
                    <span class="info-box-icon"><i class="ion ion-filing"></i></span> 
                    <div class="info-box-content">
                        <span class="info-box-text">NAME-2</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 85%">85</div>
                        </div>
                        <span class="progress-description">PRODUCT-DESCRIPTION-2</span>
                        <span class="label label-success status">PROGRESS-2</span>
                        <span style="" class="ion-person-stalker">&nbsp;8</span>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-md-3 col-sm-6 col-xs-12 item">
            <div class="info-box">
                <div class="info-box bg-red">
                    <span class="info-box-icon"><i class="ion ion-filing"></i></span> 
                    <div class="info-box-content">
                        <span class="info-box-text">NAME-3</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 70%">70</div>
                        </div>
                        <span class="progress-description">PRODUCT-DESCRIPTION-3</span>
                        <span class="label label-success status">PROGRESS-3</span>
                        <span style="" class="ion-person-stalker">&nbsp;15</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
            </div>
        </div>
   </div>

and if you want to append for add the html element from JSON object:

make a string of your div you want to add with js for example I write a function (makeText) and I make my html element in it

//for exmaple :
var obj = [
  {Name:'Name1',Progress:'Progress1',Description:'Description1',Status:'Status1'},
  {Name:'Name2',Progress:'Progress2',Description:'Description2',Status:'Status2'},
  {Name:'Name3',Progress:'Progress3',Description:'Description3',Status:'Status3'},
  {Name:'Name4',Progress:'Progress4',Description:'Description4',Status:'Status4'},
  {Name:'Name5',Progress:'Progress5',Description:'Description5',Status:'Status5'},
]

for( var x in obj){
$('.appendToHere').append(makeText(obj[x].Name,obj[x].Progress,obj[x].Description,obj[x].Status));
}

function makeText(Name,Progress,Description,Status){
return('<div class="col-md-3 col-sm-6 col-xs-12"><div class="info-box"><div class="info-box bg-yellow"><span class="info-box-icon"><i class="ion ion-filing"></i></span><div class="info-box-content"><span class="info-box-text">'+Name+'</span><div class="progress"><div class="progress-bar" style="width: 70%"></div></div><span class="progress-description">'+Description+'</span><span class="label label-info">'+Progress+'</span><span style="padding-left:5px" class="ion-person-stalker">&nbsp;'+Status+'</span></div></div></div></div>');
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="row appendToHere"></div>

Martin · Accepted Answer · 2016-03-29 08:48:30Z

Since you have not unique class names for each "content box" or content part (name etc), you need to add this. Then you can simply loop with:

$('.itembox').each(function() {
    console.log($(this).find('.itemname').html()); --debug print
    // TODO here you can set/get or do want you want for each content value
    //$(this).find('.itemdecription')... etc
});

Changes needed are to add (for example) class "itembox" to each main item box and the "itemname" to each span for name. And so on for other content you want to find (description etc).

Example:

       <div class="info-box itembox">
           <div class="info-box bg-yellow">
              <span class="info-box-icon"><i class="ion ion-filing"></i></span>
                <div class="info-box-content">
                   <span class="info-box-text itemname">NAME-1</span>
                     <div class="progress">
                       <div class="progress-bar" style="width: 70%"></div>
                     </div>
                     <span class="progress-description">
                         PRODUCT-DESCRIPTION-1
                     </span>
                     <span class="label label-info">PROGRESS-1</span>
                     <span style="padding-left:5px" class="ion-person-stalker">&nbsp;5</span>
                 </div>
             </div>
        </div>

Yogi · Accepted Answer · 2016-03-29 09:54:49Z

The brute force method shown below works. It simply loops through each class and writes the corresponding data element. See jQuery.each()

However, if you expect your data to grow beyond 3-rows then templates (as suggested in comments) would be a far more robust solution.

Show and Run the snippet to try

function updateUI( data ) {

  $('.info-box-text').each(function(i, o) {
    $(o).html(data[i].Name || '');
  });

  $('.progress-bar').each(function(i, o) {
    $(o).html(data[i].Progress || '');
  });

  $('.progress-description').each(function(i, o) {
    $(o).html(data[i].Description || '');
  });

  $('.label').each(function(i, o) {
    $(o).html(data[i].Status || '');
  });

};

function updateUI( data ) {

  $('.info-box-text').each(function(i, o) {
    $(o).html(data[i].Name || '');
  });

  $('.progress-bar').each(function(i, o) {
    $(o).html(data[i].Progress || '');
  });

  $('.progress-description').each(function(i, o) {
    $(o).html(data[i].Description || '');
  });
  
  $('.label').each(function(i, o) {
    $(o).html(data[i].Status || '');
  });

};



$(document).ready(function() {
  
// generate test data
var i, data = [];
for (i = 0; i < 3; i++) {
  data.push({
    Name: 'Name-' + i,
    Progress: 'Progress-' + i,
    Description: 'Description-' + i,
    Status: 'Status-' + i
  });
}
  
  updateUI( data );
  
  window.debug.innerHTML = JSON.stringify( data, false, '  ');
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
      <div class="info-box bg-yellow">
        <span class="info-box-icon"><i class="ion ion-filing"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">NAME-1</span>
          <div class="progress">
            <div class="progress-bar" style="width: 70%"></div>
          </div>
          <span class="progress-description">
                            PRODUCT-DESCRIPTION-1
                        </span>
          <span class="label label-info">PROGRESS-1</span>
          <span style="padding-left:5px" class="ion-person-stalker">&nbsp;5</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
      <div class="info-box bg-green">
        <span class="info-box-icon"><i class="ion ion-filing"></i></span> 
        <div class="info-box-content">
          <span class="info-box-text">NAME-2</span>
          <div class="progress">
            <div class="progress-bar" style="width: 85%"></div>
          </div>
          <span class="progress-description">
                         PRODUCT-DESCRIPTION-2
                        </span>
          <span class="label label-success">PROGRESS-2</span>
          <span style="" class="ion-person-stalker">&nbsp;8</span>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
      <div class="info-box bg-red">
        <span class="info-box-icon"><i class="ion ion-filing"></i></span> 
        <div class="info-box-content">
          <span class="info-box-text">NAME-3</span>
          <div class="progress">
            <div class="progress-bar" style="width: 70%"></div>
          </div>
          <span class="progress-description">
                            PRODUCT-DESCRIPTION-3
                        </span>
          <span class="label label-success">PROGRESS-3</span>
          <span style="" class="ion-person-stalker">&nbsp;15</span>
        </div>
        <!-- /.info-box-content -->
      </div>
    </div>
  </div>

</div>


<h3>JSON:</h3>
<xmp id="debug"></xmp>

Collectives™ on Stack Overflow

How to loop through nested HTML div elements using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related