Question

我有一个html页面，其中有3个div，类名为＆＃34; xyz＆＃34;，现在，在页面加载($(document).ready(function())，每次出现div＆＃34 ; XYZ＆＃34;我想引入一个内部html / child元素作为＆＃34; <div class="childxyz###"></div>＆＃34;其中###表示父类xyz出现的位置编号。例如，第一次出现的父类xyz，子类名称将是＆＃34; childxyz1＆＃34;，第二次出现它将是childxyz2，依此类推。

有人可以建议一个简单的解决方案吗？

初始页面

<div class="xyz">
            //appending inner html and pass value 1 as xyz is the first occurrence
        </div> 

<div class="xyz">
    //appending inner html and pass value 2 as xyz is the first occurrence
</div> 

<div class="xyz">
    //appending inner html and pass value 3 as xyz is the first occurrence
</div>

运行Jquery / JS脚本时的最后一页应如下所示。

<div class="xyz">
    <div class="childxyz1">
    </div>
</div> 

<div class="xyz">
    <div class="childxyz2">
    </div>
</div> 

<div class="xyz">
    <div class="childxyz3">
    </div>
</div>


<div class="xyz">
    <div class="childxyz1">
    </div>
</div> 

<div class="xyz">
    <div class="childxyz2">
    </div>
</div> 

<div class="xyz">
    <div class="childxyz3">
    </div>
</div>

修改我已经包含了我正在处理的示例代码，在这里我希望用更好的代码替换第0和第1位置的硬编码值。感谢这方面的任何帮助。

.datatableTesting0 thead tr th
.datatableTesting1 thead tr th

**我想要实现的是一个存储值的2维数组，这样，在第0个位置它存储第一次出现的类的内容=＆＃34; datatableTesting＆＃34;并且在第1个位置第二次出现具有相同类名的表，依此类推。

＆＃13;

$(".datatableTesting").each(function(i) {
  $(this).addClass("datatableTesting" + i);
});
var tableArray2 = new Array(10);
var tableArray1 = new Array(10);
$('.datatableTesting0 thead tr th').each(function(i) {
  var cellText = $(this).html();
  tableArray1.push(cellText);
});

$('.datatableTesting1 thead tr th').each(function(i) {
  var cellText = $(this).html();
  tableArray2.push(cellText);
});

$('.test1').each(function(i) {
  var cellText = $(this).html(tableArray1);

});

$('.test2').each(function(i) {
  var cellText = $(this).html(tableArray2);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<table class="datatableTesting" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>System Architect</td>
      <td>Edinburgh</td>

    </tr>
  </tbody>
</table>

<table class="datatableTesting" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Last name</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Nixon</td>
      <td>$320,800</td>
    </tr>
  </tbody>
</table>

<table class="test1" cellspacing="0" width="100%"></table>
<table class="test2" cellspacing="0" width="100%"></table>

＆＃13;

Answer 1

allNodes = document.getElementsByClassName("xyz");
for(var i=0;i<allNodes.length;i++){
    newNode = document.createElement("div");
    newNode.className = "childxyz" + (i+1);
    allNodes[i].appendChild(newNode);
}

此？

Answer 2

我为这个自定义要求做了类似的事情（2D迭代。）。

for (outerloop=0; outerloop < count; outerloop++){
        columns=0;
        var columns = $(".datatableTesting"+outerloop+" tr")[0].cells.length;
        tableCount[outerloop]=new Array(columns);
        $(".datatableTesting"+outerloop+" thead tr th").each(function(itrCol) {
            var cellText = $(this).html();  
            //fillvalue in the 2 Dimensional array 
            tableCount[outerloop][itrCol]=cellText;
        });
        createDOMStr[outerloop] //initialize to empty str.
        for (innerloop=0; innerloop < tableCount[outerloop].length; innerloop++){
            // append the string that you want to  display 
            createDOMStr[loopiter] = createDOMStr[loopiter] +//append the DOM string one row at at time.
        }

    }

Jquery：动态地将迭代索引添加到child / parent <divs>类的名称

2 个答案: