How to loop in nested loop through multiple arrays? - javascript

I'm trying to find and replace URL's for each a element.
Each wrap has data-folder with a path to a file.
Each <a> element inside each wrap links to a file. The problem is that each <a> can be linked with folder up, like '../' or multiple- '../../../'.
I have to check how many '../' each has and for each '../' remove one folder. like '/folder/'
This is my HTML:
<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3/">
Link
Link
Link
</div>
<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3/data_folder_4">
Link
</div>
And jQuery:
console.clear();
var wrap = $(".wrap");
$.each(wrap, function(index, value) {
var file = $(this).attr("data-folder");
var fileArray = file.split("/");
var links = $(this).find("a");
// loop for link elements (a), it looops 4 times in this case
$.each( links, function( ind, val ){
var $this = $(this);
var aHref = $(this).attr('href');
var hrToArr = aHref.split("/");
console.log(hrToArr);
$.each(hrToArr, function( indx, va ){
if( va == '..' ){
fileArray.pop();
$this.addClass( fileArray );
console.log(va);
}
});
})
});
The results should be:
<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3">
Link
Link
Link
</div>
<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3/data_folder_4">
Link
</div>
Codepen here: https://codepen.io/rolandas/pen/XLEXPR?editors=1010

var wrap = $(".wrap");
$.each(wrap, function(index, value) {
var file = $(this).attr("data-folder");
var fileArray = file.split("/").filter(Boolean);
var links = $(this).find("a");
// loop for link elements (a), it looops 4 times in this case
$.each( links, function( ind, val ){
var $this = $(this);
var aHref = $(this).attr('href');
var hrToArr = aHref.split("/").filter(Boolean);
/* console.log(hrToArr) */;
let a = fileArray;
let b = [];
$.each(hrToArr, function( indx, va ){
if(va === '..') {
fileArray.pop();
} else {
b.push(va)
}
});
$this.attr('href', a.concat(b).join('/'));
})
});
Output:
<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3/">
Link
Link
Link
</div>
<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3/data_folder_4">
Link
</div>

Probably you don't need to remove ../ because servers/browsers usually support finding subdirectory in url (e.g /a/b/../c will be interpret as /a/c). However I do it in below code
let w=[...document.querySelectorAll('.wrap')];
for(let v of w) {
let f = v.dataset.folder.split('/');
for(let a of [...v.children]) {
let n= a.outerHTML.match(/href="(.*)">/)[1].match(/\.\.\//g);
n = n ? n.length : 0;
let p= n==0 ? f : f.slice(0,-n||1);
a.href = p.join('/') + a.pathname.replace(/\.\.\//g,'');
}
}
let w=[...document.querySelectorAll('.wrap')];
for(let v of w) {
let f = v.dataset.folder.split('/');
for(let a of [...v.children]) {
let n= a.outerHTML.match(/href="(.*)">/)[1].match(/\.\.\//g);
n = n ? n.length : 0;
let p= n==0 ? f : f.slice(0,-n||1);
a.href = p.join('/') + a.pathname.replace(/\.\.\//g,'');
}
}
<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3">
Link
Link
Link
</div>
<div class="wrap" data-folder="data_folder_1/data_folder_2/data_folder_3/data_folder_4">
Link
</div>

Related

childNode.remove() doesn't seem to be working

I'm writing a google sheets add on that helps you track data as you play a game. In the sidebar, you can search for a monster in the game and after you hit the submit button the monster's stats, a list of what items they drop after a kill, and a link to the wiki is rendered on screen.
The problem I'm having is that when you search a new monster after having already searched for one, the old items from the drop section won't get removed. The other sections on stats and the wiki link will change, but instead of removing the old drop items, the new items just get added to the end of the list.
I've tried using parent.removeChild() and childNode.remove() and neither seem to do anything and I'm wondering if its because of how google apps script works.
Here is the html for the sidebar itself: note that include() is a custom function that google recommends you add to your script so you can import other files.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Info sidebar styles'); ?>
</head>
<body>
<form id="monsters">
<input class="monsterInput" type="text"placeholder="Monster Name" name="monsterName" />
<input class="monsterInput" type="text" placeholder="Monster Level" name="monsterLvl" />
<button id="submit">Search</button>
</form>
<div id="output">
</div>
<?!= include('sidebar script'); ?>
</body>
</html>
Here's the code for sidebar script:
<script>
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready(){
// create the divs that are later filled with info
var output = document.getElementById("output");
var stats = document.createElement("div");
stats.id = "statsDiv";
var drops = document.createElement("div");
drops.id = 'dropDiv';
var list = document.createElement("div");
list.id = "dropList";
var wiki = document.createElement("div");
wiki.id = "wiki";
output.appendChild(stats);
output.appendChild(drops);
output.appendChild(wiki);
var index = 0;
// the onSuccess for the onClick eventHandler. data is an object returned from the function call below
function onSuccess(data) {
console.log(`first index ${index}`);
// if the submit button has already been pushed and added the droplist to the DOM, increase the index
if(drops.getElementsByClassName("dropItem")[0]){
index++;
console.log(`second index ${index}`);
};
console.log(index);
// get the stats
var hitpoints = data.hitpoints;
var attackarray = data["attack_type"]
var attackTypes = '';
var attack1 = attackarray[0];
var attack2 = attackarray[1];
var attack3 = attackarray[2];
var attack4 = attackarray[3];
if(attackarray.length === 1){
attackTypes = attack1;
} else if (attackarray.length === 2){
attackTypes = `${attack1}, ${attack2}`;
} else if (attackarray.length === 3){
attackTypes = `${attack1}, ${attack2}, ${attack3}`;
} else if (attackarray.length === 4){
attackTypes = `${attack1}, ${attack2}, ${attack2}, ${attack4}`;
}
var attLvl = data["attack_level"];
var defLvl = data["defence_level"];
var magicLvl = data["magic_level"];
var rangeLvl = data["ranged_level"];
var maxHit = data["max_hit"];
var aggro = '';
if(data.aggressive){
aggro = "Yes";
} else {
aggro = "No";
}
var speed = data["attack_speed"];
// put the stats into html form
var statsInner =
`<h2> Stats </h2>
<ul id="statsList">
<li>Hitpoints: ${hitpoints}</li>
<li>Attack Level: ${attLvl}</li>
<li>Defense Level: ${defLvl}</li>
<li>Magic Level: ${magicLvl}</li>
<li>Ranged Level: ${rangeLvl}</li>
<li>Attack Style: ${attackTypes} </li>
<li>Attack Speed: ${speed}</li>
<li>Max Hit: ${maxHit} </li>
<li>Aggressive? ${aggro} </li>
</ul>`;
stats.innerHTML = statsInner;
drops.innerHTML = '<h2>Drops</h2>';
// Put the wiki url into HTML
var wikiURL = data["wiki_url"];
var wikiInner = `<p>For more info check out this monsters page on the wiki, <a href=${wikiURL}>here</a>.</p>`;
wiki.innerHTML = wikiInner;
// get the drop information and put it in html form. make the data-id attribute of each object equal the value of index
data.drops.forEach(function (item) {
var name = item.name;
var quant = item.quantity;
var members = '';
if(item.members){
members = "(m)";
}
var nameQM = `${name} (x${quant}) ${members}`;
var rarity = (item.rarity) * 100;
var rare = rarity.toFixed(2);
var nameNode = document.createElement("div");
var itemList =
`<p>${nameQM}</p>
<br>
<p> Rarity: ${rare} percent </p>`;
nameNode.innerHTML = itemList;
nameNode.className = "dropItem";
nameNode.dataset.id = index;
list.appendChild(nameNode);
})
drops.appendChild(list);
// if the drop item has a data-id that doesn't match the current index, remove it from the DOM.
var dropArray = list.getElementsByClassName("dropItem");
for(var i = 0; i < dropArray.length; i++){
var item = dropArray[i];
if(item.dataset.id != index){
item.remove();
}
}
}
//add the event listener to the submit button. getMonsterData makes an API call, parses the data, and returns an object filled with the data we add to the DOM through the success handler
document.getElementById("submit").addEventListener("click", function (e) {
e.preventDefault();
var parent = e.target.parentElement;
var monsterName = parent.elements[0].value;
var monsterlvl = parent.elements[1].value;
google.script.run.withSuccessHandler(onSuccess).getMonsterData(monsterName, monsterlvl);
});
}
</script>

How to print selectors of DOM objects

Given a DOM structure like this:
<div>
<div>
<span>
<img/>
<i>
<span></span>
<meter></meter>
</i>
<a><span></span></a>
</span>
</div>
<nav>
<form>
<input/>
<button></button>
</form>
</nav>
</div>
Wondering how you take that and then return a flat array of all the selectors:
[
'div > div > span > img',
'div > div > span > i > span',
'div > div > span > i > meter',
'div > div > span > a > span',
'div > nav > form > input',
'div > nav > form > button'
]
My attempt hasn't gotten anywhere:
function outputSelectors(array, node) {
var tag = node.tagName
array.push(tag)
for (var i = 0, n = node.children.length; i < n; i++) {
var child = node.children[i]
outputSelectors(array, child)
}
}
outputSelectors([], document.body.children[0])
Not sure where to go from here.
One possible, a non-recursive approach going from top (root, to be precise) to bottom:
function collectLeafNodePathes(root) {
const paths = [];
const selectorParts = [];
let el = root;
while (el) {
const tagName = el.tagName.toLowerCase();
if (el.childElementCount) {
selectorParts.push(tagName);
el = el.firstElementChild;
continue;
}
paths.push(selectorParts.concat([tagName]).join(' > '));
do {
if (el.nextElementSibling) {
el = el.nextElementSibling;
break;
}
el = el.parentNode;
selectorParts.pop();
if (el === root) {
el = null;
}
} while (el);
}
return paths;
}
const selectors = collectLeafNodePathes(document.getElementById('xxx'));
console.log(selectors);
<div id="xxx">
<div>
<span>
<img/>
<i>
<span></span>
<meter></meter>
</i>
<a><span></span></a>
</span>
</div>
<nav>
<form>
<input/>
<button></button>
</form>
</nav>
</div>
That last part (do-while loop) is a bit rough around the edges, though; open to any improvement.
I've used helper properties (childElementCount, firstElementChild, nextElementSibling) to skip checking for text nodes and stuff. If that's not an option (because of compatibility reasons), it's easy to either implement polyfills or just 'rewind' the loop on non-element nodes.
You can map all elements on a page using the getPath method from this answer.
Best try this in your own console, as the snippet takes some time to run, and the snippet's console doesn't seem to handle the output properly.
jQuery.fn.extend({
getPath: function () {
var path, node = this;
while (node.length) {
var realNode = node[0], name = realNode.localName;
if (!name) break;
name = name.toLowerCase();
var parent = node.parent();
var sameTagSiblings = parent.children(name);
if (sameTagSiblings.length > 1) {
allSiblings = parent.children();
var index = allSiblings.index(realNode) + 1;
if (index > 1) {
name += ':nth-child(' + index + ')';
}
}
path = name + (path ? '>' + path : '');
node = parent;
}
return path;
}
});
const allElements = $("*");
const allPaths = allElements.map((_, e) => $(e).getPath());
console.log(allPaths);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is a version without jQuery, if that's preferable:
function getPath (node) {
var path;
while (node.parentElement) {
var name = node.localName;
if (!name) break;
name = name.toLowerCase();
var parent = node.parentElement;
var sameTagSiblings = [...parent.children].filter(e => e.localName === name);
if (sameTagSiblings.length > 1) {
allSiblings = parent.children;
var index = [...allSiblings].indexOf(node) + 1;
if (index > 1) {
name += ':nth-child(' + index + ')';
}
}
path = name + (path ? '>' + path : '');
node = parent;
}
return path;
};
const allElements = document.querySelectorAll("*");
const allPaths = [...allElements].map(e => getPath(e));
console.log(allPaths);
Slightly modifying this solution to get path and this one to get leaf nodes.
function getPath(node)
{
var path;
while (node.parentNode )
{
name = node.nodeName;
if (!name) break;
var parent = node.parentNode;
path = name + (path ? ' > ' + path : '');
node = parent;
}
return path;
}
function getLeafNodes()
{
var allNodes = document.getElementsByTagName("*");
var leafNodes = Array.from( allNodes ).filter(function(elem) {
return !elem.hasChildNodes();
});
return leafNodes;
}
var leadNodes = getLeafNodes() ;
var output = leadNodes.map( s => getPath(s) );
console.log(output);
<div>
<div>
<span>
<img/>
<i>
<span></span>
<meter></meter>
</i>
<a><span></span></a>
</span>
</div>
<nav>
<form>
<input/>
<button></button>
</form>
</nav>
</div>
You can create recursive function and check if current element contains children using children() method.
const result = []
const getTag = (el) => el.prop('tagName').toLowerCase()
function print(el, prev = '') {
prev = prev.length ? prev : getTag(el)
const children = el.children();
if(!children.length) result.push(prev)
else {
children.each(function() {
let tag = getTag($(this))
let str = prev + (prev.length ? ' > ' : '') + tag;
print($(this), str)
})
}
}
print($('#start'))
console.log(result)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="start">
<div>
<span>
<img/>
<i>
<span></span>
<meter></meter>
</i>
<a><span></span></a>
</span>
</div>
<nav>
<form>
<input/>
<button></button>
</form>
</nav>
</div>
To get array of unique selectors you can use Set on final result to remove duplicates.
let result = []
const getTag = (el) => el.prop('tagName').toLowerCase()
function print(el, prev = '') {
prev = prev.length ? prev : getTag(el)
const children = el.children();
if(!children.length) result.push(prev)
else {
children.each(function() {
let tag = getTag($(this))
let str = prev + (prev.length ? ' > ' : '') + tag;
print($(this), str)
})
}
}
print($('#start'))
result = [...new Set(result)]
console.log(result)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="start">
<div>
<span>
<img/>
<i>
<span></span>
<meter></meter>
</i>
<a><span></span></a>
<a><span></span></a>
</span>
</div>
<nav>
<form>
<input/>
<button></button>
</form>
</nav>
</div>

Create an array of external html pages and shuffle it into several divs

I'm currently working on a site that consists in a grid of divs (4x4) into which a set of texts have to be shuffled at each reload. This basically looks like this at the moment.
My index.htm reads :
<div class="container">
<div class="colonne">
<div class="case">
<span class="boxwatermark">1</span>
<span class="case1">
</span>
</div>
<div class="case">
<div class="boxwatermark">5</div>
<span class="case5">
</span>
</div>
<div class="case">
<div class="boxwatermark">9</div>
<span class="case9">
</span>
</div>
...
and so on up to 15 (16 remains empty).
The set of texts that I need to be distributed into the boxes (boxes = divs with classnames "case+number") are each in a separate html file (named "case1.html", "case2.html" etc.). I would like these html files to constitute the array, and this array to be shuffled "randomly" into each box.
I tried several things for the past two days, but the solution to this problem seems presently to exceed my (little) competences... I've been impressed by some of the attention given to such questions on this forum and decided to request your help. Thanks !
Try using Array.prototype.slice(), Array.prototype.splice() , .eq() , .each() , .load()
$(function() {
var c = "case";
var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
var copy = arr.slice(0);
$("." + c).each(function() {
var curr = copy.splice(Math.floor(Math.random() * copy.length), 1)[0];
$(this).load(c + curr + ".html")
})
})
plnkr http://plnkr.co/edit/rAhq6fkbUqM3BfnahAVy?p=preview
try this https://fiddle.jshell.net/
var shuffle = function (htmls) {
for (var j, x, i = htmls.length; i; j = parseInt(Math.random() * i), x = htmls[--i], htmls[i] = htmls[j], htmls[j] = x);
return htmls;
};
var display = function (shuffledArray) {
var index = 0;
for (var spot in shuffledArray) {
index++;
var cssClass = '.case' + index;
var div = document.querySelector(cssClass);
div.innerHTML = shuffledArray[spot];
}
}
if (!sessionStorage.getItem('htmlFiles')) {
var htmls = [];
htmls[0] = 'this a text for example';
htmls[1] = 'Another text for example';
htmls[2] = 'Yet anohter text for example';
htmls[3] = 'The texts keep up comming';
htmls[4] = 'More example texts here';
htmls[5] = 'Even more texts';
htmls[6] = 'The last example';
sessionStorage.setItem('htmlFiles', htmls);
}
var htmls = sessionStorage.getItem('htmlFiles').split(',');
var shuffledArray = shuffle(htmls);
display(shuffledArray);

how to make output text inside nested div with jquery

I have div inside div (nested div) and one button click and one textarea, when i click this button i want output that div in text,and add the text to Textarea
example
<div id="container">
<div class="nested">
<div id="1">
<div class="nested">
<div id="3">helpX</div>
<div id="4">helpY</div>
</div>
</div>
<div id="2">helpZ</div>
</div>
</div>
when i click my button i need the output like this =nested(=nested(helpX)(helpY))(helpZ)
my code is :
$('#BUTTONCLICK').click(function(){
$('#container').find("div").each( function(index) {
....
});
});
I hope you can help me. Thanks .
You have to set up some condition to check whether the child is a nested or child has nested children, or a simple div. So I use a recursive function to handle it:
$('#BUTTONCLICK').click(function(){
var findNest = function(ele) {
// To see if current item needs a nested prefix
var result = $(ele).hasClass("nested") ? '=nested(' : '';
$(ele).find(' > div').each(function(idx, item) {
var $item = $(item);
if ($item.hasClass("nested")) {
// If current cheked item is a nested item, nested it.
result += findNest($item);
} else if ($(item).find(".nested").length > 0) {
result += findNest(item);
} else {
// Current check item is a simple div, add it
result += '(' + $(item).text() + ')';
}
});
// Decide tail
var tail = $(ele).hasClass("nested") ? ')' : '';
return result + tail;
};
var $container = $('#container');
var result = findNest($container);
console.log(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="container">
<div class="nested">
<div id="1">
<div class="nested">
<div id="3">helpX</div>
<div id="4">helpY</div>
</div>
</div>
<div id="2">helpZ</div>
</div>
</div>
<div id="BUTTONCLICK">click</div>
If you want to give a level limit, the code can be changed to:
$('#BUTTONCLICK').click(function(){
// Inits
var LEVEL_LIMIT = 2;
var currentLevel = 0;
var findNest = function(ele) {
// Add one level at start.
++currentLevel;
// To see if current item needs a nested prefix
var result = $(ele).hasClass("nested") ? '=nested(' : '';
$(ele).find(' > div').each(function(idx, item) {
var $item = $(item);
var $nestChilds = $(item).find(".nested");
if (currentLevel <= LEVEL_LIMIT &&
($item.hasClass("nested") || $nestChilds.length > 0)) {
// If current cheked item is a nested item, or it has child that is nest, go into it.
result += findNest($item);
} else {
// Current check item is a simple div or level limit reached,
// simply add div texts...(May need other process of text now.)
result += '(' + $(item).text() + ')';
}
});
// Decrease Level by one before return.
--currentLevel;
// Decide tail
var tail = $(ele).hasClass("nested") ? ')' : '';
return result + tail;
};
var $container = $('#container');
var result = findNest($container);
console.log(result);
});
Try
$('#BUTTONCLICK').click(function(){
var text = '';
$('#container').find("div").each( function(index) {
text += $(this).text();
});
$("textarea").val(text);
});
$('#BUTTONCLICK').click(function(){
var findNest = function(ele) {
// To see if current item needs a nested prefix
var result = $(ele).hasClass("nested") ? '=nested(' : '';
$(ele).find(' > div').each(function(idx, item) {
var $item = $(item);
if ($item.hasClass("nested")) {
// If current cheked item is a nested item, nested it.
result += findNest($item);
} else if ($(item).find(".nested").length > 0) {
// For all .nested child from the item, do the findNest action
$(item).find(".nested").each(function(idx, item) {
result += findNest(item);
});
} else {
// Current check item is a simple div, add it
result += '(' + $(item).text() + ')';
}
});
// Decide tail
var tail = $(ele).hasClass("nested") ? ')' : '';
return result + tail;
};
var $container = $('#container');
var result = findNest($container);
console.log(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="container">
<div class="nested">
<div id="1">
<div class="nested">
<div id="3">helpX</div>
<div id="4">helpY</div>
</div>
</div>
<div id="2">helpZ</div>
</div>
</div>
<div id="BUTTONCLICK">click</div>

change a inner html id with js

how do you change a inner id with js and keep it the same id num (e.g hey1, bob2)
my js code
var obj = document.getElementById("chat").cloneNode(true);
var obj1 = document.getElementById("ch");
var obj2 = document.getElementById("chatbox");
var p = $(".chat");
var offset = p.offset();
num = num + 1;
if (num <=15) {
obj.id = obj.id + num; <--- **changing the id (this one works fine but the other two dont**
obj1.id = obj1.id + num; <--- changing the id
obj2.id = obj2.id + num; <--- changing the id
document.body.appendChild(obj);
document.body.appendChild(obj1);
document.body.appendChild(obj2);
var left = offset.left + 275;
document.getElementById("chat").style.left = left + "px";
tell me if i am doing it wrong but this was the easiest way i thought off
(ps i am a beginner at javascript)
thanks to all that try to help...
Edit
ok i clone this
<div class="chat" id="chat">
<div id="ch" class="ch">
<h2>Chat</h2></div>
<div class="chatbox" id="chatbox">
<div class="messages"></div>
<textarea id="message" class="chatinp"
rows="3" cols="27"></textarea>
<button class="send">Send</button></div>
</div>
and everytime it clones it changes the id of chat,ch and chatbox but keeping the original the same
like so...
clone1
<div class="chat" id="chat1">
<div id="ch1" class="ch">
<h2>Chat</h2></div>
<div class="chatbox" id="chatbox1">
<div class="messages"></div>
<textarea id="message" class="chatinp"
rows="3" cols="27"></textarea>
<button class="send">Send</button></div>
</div>
Clone2
<div class="chat" id="chat2">
<div id="ch2" class="ch">
<h2>Chat</h2></div>
<div class="chatbox" id="chatbox2">
<div class="messages"></div>
<textarea id="message" class="chatinp"
rows="3" cols="27"></textarea>
<button class="send">Send</button></div>
</div>
Not sure, but if I'm right, you're trying to create a new 'chatnode'. You'll have to traverse the childNodes array of the node you cloned to change id's. Try something like:
function cloneChat(){
var obj = document.getElementById("chat").cloneNode(true),
children = obj.childNodes
;
num += 1;
obj.id = obj.id+num;
if (num<16){
changeId(children,num);
}
//now appending obj to the document.body should be sufficient
document.body.appendChild(obj);
//change id recursively
function changeId(nodes, n){
for (var i=0;i<nodes.length;i=i+1){
if (nodes[i].childNodes){
changeId(nodes[i].childNodes,n);
}
if(nodes[i].id && /^ch$|^chatbox$/i.test(nodes[i].id)) {
nodes[i].id += String(n);
}
}
}
}
See this jsfiddle for a working example
Furthermore, this code won't work:
var p = $(".chat");
var offset = p.offset();
Because $(".chat") returns a list of nodes, where every node has it's own offset.
You seem to be using jQuery, so I suggest adding a 'jQuery' tag to your question. Maybe some jQuery whizzkid has a solution to offer.
In jQuery try to use
element.attr("id","newId");
See: http://api.jquery.com/attr/
How about this function?
function appendMe() {
var elementsToClone = ["chat"]; //Parent Elements to clone. This is the class name as well as the id
var childrenToHandle = new Array();
childrenToHandle["chat"] = ["ch"]; //Child elements mapping to keep sync. This is the class name as well as the id. Here we say that for the parent element chat, the inner elements to keep in sync is ch
var itemCount = 0;
for(i = 0; i < elementsToClone.length; i++) {
var refObj = document.getElementById(elementsToClone[i]);
if(refObj) {
$("." + elementsToClone[i]).each(
function() {
if(this.id.match(/\d+$/g)) {
itemCount = this.id.match(/\d+$/g);
}
}
);
var newObj = refObj.cloneNode(true);
newObj.id = elementsToClone[i] + ++itemCount;
var childrenArray = childrenToHandle[elementsToClone[i]];
if(childrenArray) {
$(childrenArray).each(
function() {
$(newObj).find("." + this).attr("id", this + itemCount);
}
);
}
document.body.appendChild(newObj);
}
}
}
Since you're already using jQuery in your code, how about:
var $obj = $("#chat").clone(),
$obj1 = obj.find("#ch"),
$obj2 = obj.find("#chatbox");
var p = $(".chat"),
offset = p.offset();
num = num + 1;
if (num <= 15) {
$obj.attr('id', $obj.attr('id') + num);
$obj1.attr('id', $obj1.attr('id') + num);
$obj2.attr('id', $obj2.attr('id') + num);
$('body').append(obj);
var newLeft = offset.left + 275;
$('#chat').css({
left: newLeft
});
}

Categories