如何使用jQuery循环嵌套的HTML div元素

时间：2016-03-29 08:18:30

标签： javascript jquery html css

我的网页中有一个嵌套的HTML div元素。我将数据从JSON文件读取到变量中。

EX：obj将是具有以下属性的对象数组。 名称，进度，描述和状态，以便每个项目都可访问 这样

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

我需要遍历每个div元素并设置数据。我如何使用jQuery做到这一点。

例如：我需要遍历 div（#row）中的每个信息框 并在以下HTML元素中设置值

 - <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>

jQuery每个函数都应循环遍历以下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>

3 个答案:

答案 0 :(得分：1)

如果您想要从html到JSON对象的读取属性，您可以这样做： 如需查看结果，请参阅控制台

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

如果你想追加从JSON对象添加html元素：

创建一个你想要用js添加的div的字符串，例如我编写一个函数（ makeText ）并在其中创建我的html元素

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

答案 1 :(得分：0)

由于您没有每个“内容框”或内容部分（名称等）的唯一类名，因此您需要添加此名称。然后你可以简单地循环：

$('.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
});

所需的更改是将（例如）类“itembox”添加到每个主项目框，并将“itemname”添加到每个范围的名称。等等你想要找的其他内容（描述等）。

示例：

       <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>

答案 2 :(得分：0)

下面显示的蛮力方法有效。它只是遍历每个类并写入相应的数据元素。见jQuery.each()

但是，如果您希望数据增长超过3行，那么模板（如评论中所示）将是一个更强大的解决方案。

显示并运行代码段以尝试 

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

};

＆＃13;
＆＃13; 
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, '  ');
  
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题