yeppe yeppe - 5 months ago 9
jQuery Question

dynamically add/modify child/parent class name etc based iteration index: Post edited

I have a html page that has, 3 div with class name as "

xyz
", Now, On page load
($(document).ready(function())
for each occurring of div "xyz" I want to introduce an inner html/child element as "
<div class="childxyz###"></div>
" where
###
represents the position number of occurrence of parent class xyz . For instance, the first occurrence of parent class xyz the child class name would be "
childxyz1
", second occurrence it would be
childxyz2
and so on.

Can someone suggest a simple solution for this?

Initial page

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


The final page when the Jquery/JS script runs should look like this.

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


I have included a sample code that I am working, here I wish to replace the hard-coded value of 0th and 1th position with a better code. Appreciate any help in this regard.

.datatableTesting0 thead tr th
.datatableTesting1 thead tr th




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

});

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




lsv lsv
Answer
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);
}

this?