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, Mar 29 '16 at 08:26
Assuming that each object will have the same HTML structure maybe try using a Javascript templating engine like EJS (http://www.embeddedjs.com/). I've used it before to do something very similar and found that it works great — Draco, Mar 29 '16 at 08:26
Maybe you can then look at JQuery template engines: http://stackoverflow.com/q/170168/66098 — Draco, Mar 29 '16 at 08:32

peyman azizi · Answer 1 · 2016-03-29T09:54:26.717

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>

score 0 · Answer 2 · answered Mar 29 '16 at 08:48

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>

score 0 · Answer 3 · answered Mar 29 '16 at 09:54

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>

How to loop through nested HTML div elements using jQuery

3 Answers3