Question

所以我的标记中有很多divs类似于：

<div class="container">
   <div class="wrapper">
      <h3>Title</h3>
      <p>Some text</p>
   </div>
</div>

标记看起来非常凌乱，而且我对JS很新，但想知道，如果我可以将所有这些div放入一个数组中，然后使用for循环迭代它们，然后打印它们。但是仍然可以控制每个div，我可以改变它们的背景颜色吗？

我的JS到目前为止：

  var div = {
    divInfo: [
      {
        title: "title",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing"
      }
    ]
  };

我现在只展示了一个div，因为我还在为for循环而苦苦挣扎。

任何帮助/建议？谢谢！

Answer 1

你正在寻找这样的东西吗？

$(document).ready(function() {
    var arrayDivs = [
        {
            title: 'Title 1',
            description: 'This is the description to Title 1',
            backgroundColor: 'gray',
            color: 'black'
        },
        {
            title: 'Title 2',
            description: 'This is the description to Title 2',
            backgroundColor: 'blue',
            color: 'red'
        },
    ];
        
    function init() {
        for (var i = 0; i < arrayDivs.length; i++) {
            var html = '';
            html += '<div class="section" style="color:' + arrayDivs[i].color + '; background-color:' + arrayDivs[i].backgroundColor + ';">';
            html += '<h3>' + arrayDivs[i].title + '</h3>';
            html += '<p>' + arrayDivs[i].descritpion + '</p>';
            html += '</div>';
            $('.container').append(html);
        }
    };     
    init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="wrapper">
      <h3>Title</h3>
      <p>Some text</p>
   </div>
</div>

Answer 2

我知道JQuery你可以用这个

来做到这一点

＆＃13;

     var div = {
        divInfo: [
          {
            title: "Title 1",
            description: "1 Lorem ipsum dolor sit amet, consectetur adipiscing"
          },
          {
            title: "Title 2",
            description: "2 Lorem ipsum dolor sit amet, consectetur adipiscing"
          },
          {
            title: "Title 3",
            description: "3 Lorem ipsum dolor sit amet, consectetur adipiscing"
          },
          {
            title: "Title 4",
            description: "4 Lorem ipsum dolor sit amet, consectetur adipiscing"
          }        
        ]
      };
    
    $.each(div.divInfo,function(i,x){
     $('.container').append('<div class="wrapper"><h3>'+x.title+'<p>'+x.description+'</p></h3></div>')
    })

＆＃13;

.wrapper{
    background:skyblue;
    margin:5px;
    padding:5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
</div>

＆＃13;

Answer 3

您可以使用jquery.each()来迭代每个.wrapper：

var divs = [];
$('div.wrapper').each(function() {
   var $this = $(this);
   divs.push({
       divinfo: {
           title: $this.find('h3').html(),
           description: $this.find('p').html()
       }
   });
});

Answer 4

当然，只是一个例子......

var divArr = document.getElementsByTagName('DIV');

for (var i= 0; i < divArr.length; i++) {
  if (divArr[i].className !== 'container') {
    divArr[i].title = 'new title';
  }
}

Answer 5

如果您尝试根据信息数组创建HTML元素，可以使用以下代码：

// get the container element in which you want to insert divs
var container = document.querySelector(".container");

// loop through all the elements in your array
for(var i = 0, len = div.divInfo.length; i < len; i++){
    // create the actual div element to insert
    var wrapper = document.createElement("div");
    // specify element attributes here as necessary
    // append the element to the container
    container.appendChild(wrapper);
}

以下是一些工作示例代码：

var div = {
    divInfo: [
      {
        title: "title",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing"
      },
      {
        title: "another title",
        description: "Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus."
      }
    ]
  };
var container = document.querySelector(".container");
for(var i = 0, len = div.divInfo.length; i < len; i++){
  var wrapper = document.createElement("div");
  wrapper.className = "wrapper";
  wrapper.style.backgroundColor = "#dfdfdf;"; 
  var header = document.createElement("h3");
  header.innerHTML = div.divInfo[i].title;
  var body = document.createElement("p");
  body.innerHTML = div.divInfo[i].description;
  wrapper.appendChild(header);
  wrapper.appendChild(body);
  container.appendChild(wrapper);
}

<div class="container"></div>

如果您尝试根据页面上的现有HTML元素创建数组，则可以使用以下代码：

// grab all the divs with the wrapper class, inside the element with the container class
var divs = document.querySelectorAll(".container div.wrapper");
// loop through the results
for(var i = 0, len = divs.length; i < len; i++){
    var currentDiv = divs[i];
    // modify the elements or extract data from them here
}

再次，这是一些工作示例代码：

var divs = document.querySelectorAll(".container div.wrapper");
var div = {divInfo:[]};
for(var i = 0, len = divs.length; i < len; i++){
  var currentDiv = divs[i];
  var title = divs[i].querySelector("h3").innerHTML;
  var description = divs[i].querySelector("p").innerHTML;
  div.divInfo.push({title:title, description:description});
  currentDiv.style.backgroundColor = "#dfdfdf";
}
document.getElementById("output").innerHTML = "div = "+JSON.stringify(div);

<div class="container">
   <div class="wrapper">
      <h3>Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
   </div>
     <div class="wrapper">
      <h3>Another Title</h3>
      <p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</p>
   </div>
</div>
<hr/>
<b>Code Result:</b>
<div id="output"></div>

这两个示例都使用element.style.backgroundColor更新了div的背景。

在JavaScript中将多个div放在数组中

5 个答案: