Question

我正在尝试执行以下操作：

a）将包含值1,2,3的数组中的类添加到具有类.tab-col的所有div中。班级.tab-col中的第一个div应该有班级one，第二个div应该有班级two等等。=＆gt;这是addCol()在下面的代码中所做的事情

b）a）完成后，尝试抓取tab-col div，并将第一类添加到第一个子元素（col-attr），两个添加到第二个元素等。 =＆GT; addAttr()试图做什么。

我成功了a）并且部分成功了b）。我遇到的问题是，只有.tab-col one的子元素标有类one，two，three。而其他tab-col的孩子并没有将他们的孩子元素中的第一，第二和第三类添加。

function addCol() {
   var elements = document.querySelectorAll(".tab-col");
   var array = ["one", "two", "three", "four", "five", "six", "seven", "eight"];
   var index = 0,
     length = elements.length;
   for (; index < length; index++) {
     elements[index].classList.add(array[index]);
   }
 }

 addCol();

 function addAttr() {
   var elements = document.querySelectorAll(".tab-col");
   var array = ["one", "two", "three", "four", "five", "six", "seven", "eight"];

   var index = 0,
     length = elements.length;
   for (; index < length; index++) {
     var select = document.querySelectorAll(".tab-col" + "." + array[index] + "> .col-attr");
     for (var i = 0, length = select.length; index < length; i++) {
       select[i].classList.add(array[i]);
     }
   }
 }

 addAttr();

<div class="table">
  <div class="tab-col">
    <div class="col-attr"></div>
    <div class="col-attr"></div>
    <div class="col-attr"></div>
  </div>
  <div class="tab-col">
    <div class="col-attr"></div>
    <div class="col-attr"></div>
    <div class="col-attr"></div>
  </div>
  <div class="tab-col">
    <div class="col-attr"></div>
    <div class="col-attr"></div>
    <div class="col-attr"></div>
  </div>
</div>

这是一个JSBIN复制问题：http://jsbin.com/hohuxewixi/edit?html,css,js,output

（注意：由于没有内容，您必须在输出区域中打开浏览器的控制台（检查元素））

我的问题如何让.tab-col two和.tab-col three让他们的子元素（.col-attr）具有第一，第二和第三类，就像{{1}一样（如果你看一下将运行JavaScript的已完成的JSBIN）？任何帮助将不胜感激！

Answer 1

您正在内循环中隐藏index和length的值。使用这样的不同变量：

function addAttr(){
    var elements = document.querySelectorAll(".tab-col");
    var array = ["one", "two", "three", "four", "five", "six", "seven", "eight"];

    // the index and length that you're overriding inside the loop
    var index = 0, length = elements.length;
    for( ;index < length; index++){
        var select = document.querySelectorAll(".tab-col" + "." + array[index] + "> .col-attr");

        // you shouldn't override the values of index and length, use other variables
        var index2 = 0, length2 = select.length;
        for(; index2 < length2; index2++){
            select[index2].classList.add(array[index2]);
        }
    }
}

<强>测试

function addCol() {
  var elements = document.querySelectorAll(".tab-col");
  var array = ["one", "two", "three", "four", "five", "six", "seven", "eight"];
  var index = 0,
    length = elements.length;
  for (; index < length; index++) {
    elements[index].classList.add(array[index]);
  }
}

addCol();




function addAttr() {
  var elements = document.querySelectorAll(".tab-col");
  var array = ["one", "two", "three", "four", "five", "six", "seven", "eight"];

  // the index and length that you're overriding inside the loop
  var index = 0,
    length = elements.length;
  for (; index < length; index++) {
    var select = document.querySelectorAll(".tab-col" + "." + array[index] + "> .col-attr");

    // you shouldn't override the values of index and length, use other variables
    var index2 = 0,
      length2 = select.length;
    for (; index2 < length2; index2++) {
      select[index2].classList.add(array[index2]);
    }
  }
}

addAttr();

<div class="tab-col">
  <div class="col-attr">A</div>
  <div class="col-attr">B</div>
  <div class="col-attr">C</div>
</div>

<div class="tab-col">
  <div class="col-attr">D</div>
  <div class="col-attr">E</div>
  <div class="col-attr">F</div>
</div>

<div class="tab-col">
  <div class="col-attr"></div>
  <div class="col-attr"></div>
  <div class="col-attr"></div>
</div>

Answer 2

您可能想重新考虑您的方法。

CSS有一个强大的构造，用于选择名为nth-of-type的特定子元素。 Here's an MDN reference关于它。这个nth-of-type与另一个nth-child选择器的区别仅在于最轻微的方式，它可能是你在这个和其他情况下的追随者。 Here's an mdn reference on nth-child.

// querySelector and querySelectorAll in JS support css selectors
// so there is no problem using the nth child selector
var elements = document.querySelectorAll(".col-attr:nth-child(3)");

for (var i = 0; i < elements.length; ++i) {
  elements[i].style.backgroundColor = "orange";
  elements[i].style.width = "100px";
  elements[i].style.height = "20px";
}

/* We can select the first child columns of each row like so */
.col-attr:nth-child(1) {
  width: 100px;
  height: 20px;
  background-color: cornflowerblue;
}

/* We can select the second child of each row like this */
.col-attr:nth-child(2) {
  width: 100px;
  height: 20px;
  background-color: tomato;
}

<div class = "table">
  <div class="tab-col">
    <div class="col-attr"></div>
    <div class="col-attr"></div>
    <div class="col-attr"></div>
  </div>

<div class = "tab-col">
  <div class="col-attr"></div>
  <div class="col-attr"></div>
  <div class="col-attr"></div>
</div>

<div class = "tab-col">
  <div class="col-attr"></div>
  <div class="col-attr"></div>
  <div class="col-attr"></div>
</div>

您可以使用第n个孩子进行更多高级选择。当你添加一个像:nth-child(1)这样的数字时，在括号内，它表示选择编号为第n个孩子而只选择那个。当您键入:nth-child(2n)时，它会将其理解为选择偶数的每个数字。当您键入:nth-child(2n+1)时，它会将其理解为选择每个奇数。对于要理解它的任何第n个子选择，您需要知道n采用非负整数的值（{0,1,2,3, ...}）。当你键入:nth-child(3n+5)时，你可以想到的第一件事就是选择3(0)+5元素或第5个元素然后它将选择3(1)+5元素或第8个元素，依此类推，递增n每次一个，直到它选择所有可用的元素，并在其选择的上下文中。如果您将其视为an+b并将a和b视为变量，则可以从数字b开始选择该元素以及其后的每个a元素。

Answer 3

你有

for(var i=0, length = select.length; index < length; i++){

您应该使用i而不是索引。只是看起来像是一个复制和粘贴错误。

for(var i=0, length = select.length; i < length; i++){

JavaScript变量不在循环中更新

3 个答案: