How to get the DIV value from inside another div - javascript

How to get the value of a class="selected" within the div, I have tried the following code but I get the undefined
<div class="myTest1" title="testTitle1" id="test1" >
<div>answer 1</div>
<div>answer 2</div>
<div>answer 3</div>
<div class="selected">answer 4</div>
</div>
<div class="myTest2" title="testTitle2" id="test2">
<div >
<div>answer 1</div>
<div>answer 2</div>
<div class="selected">answer 3</div>
<div>answer</div>
</div>
</div>
<div class="myTest3" title="testTitle2" id="test3">
<div >
<div>answer 1</div>
<div class="selected">answer 2</div>
<div >answer 3</div>
<div>answer 4</div>
</div>
</div>
JS code:
I realized that my code is not optimized and I'm using three for loops.
var test1= document.getElementById("test1");
var test2= document.getElementById("test2");
var test3= document.getElementById("test3");
for (var i=0; i<test1.length; i++) {
var sel1 = document.getElementsByClassName("selected");
alert(quizAns1[i].innerHTML);
}
for (var i=0; i<test2.length; i++) {
var sel2 = document.getElementsByClassName("selected");
alert(sel2[i].innerHTML);
}
for (var i=0; i<test3.length; i++) {
var sel3 = document.getElementsByClassName("selected");
alert(sel3[i].innerHTML);
}


Just query directly for the elements based on the class and then loop over the results. Also, give each question the same class so they can be grouped more easily.
document.querySelectorAll("div.selected").forEach(function(item, index){
// Use .closest to get the nearest matching ancestor:
alert("For question " + item.closest(".myTest").id + ", you answered: " + item.textContent);
});
<div class="myTest" title="testTitle1" id="test1" >
<div>answer 1</div>
<div>answer 2</div>
<div>answer 3</div>
<div class="selected">answer 4</div>
</div>
<div class="myTest" title="testTitle2" id="test2">
<div >
<div>answer 1</div>
<div>answer 2</div>
<div class="selected">answer 3</div>
<div>answer</div>
</div>
</div>
<div class="myTest" title="testTitle2" id="test3">
<div >
<div>answer 1</div>
<div class="selected">answer 2</div>
<div >answer 3</div>
<div>answer 4</div>
</div>
</div>


And your fault is trying to get an element's lenght.
console.log(test1.length);//this will return null
I am new. I couldn't just leave a comment, so


Just add same 'class' on all DIV, and did changes in code.
and check snippet I hope is what you look for.
var elementList = document.querySelectorAll(".selected");
for (i = 0, max = elementList.length; i < max; i++) {
let question = elementList[i].closest(".myTest").getAttribute ("id");
console.log(`Question: ${question} -> Answer: ${elementList[i].textContent} `);
}
<div class="myTest" title="testTitle1" id="test1" >
<div>answer 1</div>
<div>answer 2</div>
<div>answer 3</div>
<div class="selected">answer 4</div>
</div>
<div class="myTest" title="testTitle2" id="test2">
<div >
<div>answer 1</div>
<div>answer 2</div>
<div class="selected">answer 3</div>
<div>answer</div>
</div>
</div>
<div class="myTest" title="testTitle2" id="test3">
<div >
<div>answer 1</div>
<div class="selected">answer 2</div>
<div >answer 3</div>
<div>answer 4</div>
</div>
</div>


If you actually want to accurately target the div in question each time, which I imagine you would under real conditions:
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
var test3 = document.getElementById("test3");
var sel1 = test1.querySelector('.selected');
var sel2 = test2.querySelector('.selected');
var sel3 = test3.querySelector('.selected');


You should do this either
<div class="myTest1" title="testTitle1" >
<div id="test1">
<div>answer 1</div>
<div>answer 2</div>
<div>answer 3</div>
<div class="selected">answer 4</div>
</div>
</div>
<div class="myTest2" title="testTitle2">
<div id="test2">
<div>answer 1</div>
<div>answer 2</div>
<div class="selected">answer 3</div>
<div>answer</div>
</div>
</div>
<div class="myTest3" title="testTitle2" >
<div id="test3" >
<div>answer 1</div>
<div class="selected">answer 2</div>
<div >answer 3</div>
<div>answer 4</div>
</div>
</div>
And in your js this:
var test1= document.getElementById("test1");
var test2= document.getElementById("test2");
var test3= document.getElementById("test3");
for (var i=0; i<test1.length; i++) {
var sel1 = document.querySelector("#test1 .selected");
alert(sel1.innerHTML);
}
for (var i=0; i<test2.length; i++) {
var sel2 = document.querySelector("#test2 .selected");
alert(sel2.innerHTML);
}
for (var i=0; i<test3.length; i++) {
var sel3 = document.querySelector("#test3 .selected");
alert(sel3.innerHTML);
}


You could try this:
for(let q = 1; q <= 3; ++q)
console.log("question", q, document.querySelector("#test" + q).querySelector(".selected").textContent);
<div class="myTest1" title="testTitle1" id="test1" >
<div>answer 1</div>
<div>answer 2</div>
<div>answer 3</div>
<div class="selected">answer 4</div>
</div>
<div class="myTest2" title="testTitle2" id="test2">
<div >
<div>answer 1</div>
<div>answer 2</div>
<div class="selected">answer 3</div>
<div>answer</div>
</div>
</div>
<div class="myTest3" title="testTitle2" id="test3">
<div >
<div>answer 1</div>
<div class="selected">answer 2</div>
<div>answer 3</div>
<div>answer 4</div>
</div>
</div>
Hope this helps.

Related

Get first element in the list if the attribute is equal value - VUE.js

I'm trying to add a class to the first div if the attribute is equal value.
What I have:
<div class="list">
<div class="list__item" title="attr1">value 1</div>
<div class="list__item" title="attr1">value 2</div>
<div class="list__item" title="attr2">value 3</div>
<div class="list__item" title="attr2">value 4</div>
<div class="list__item" title="attr2">value 5</div>
<div class="list__item" title="attr2">value 6</div>
<div class="list__item" title="attr2">value 7</div>
</div>
What I'm trying to achieve is:
What I have:
<div class="list">
<div class="list__item" title="attr1" class="active">value 1</div>
<div class="list__item" title="attr1">value 2</div>
<div class="list__item" title="attr1">value 3</div>
<div class="list__item" title="attr2" class="active">value 3</div>
<div class="list__item" title="attr2">value 4</div>
<div class="list__item" title="attr2">value 5</div>
<div class="list__item" title="attr2">value 6</div>
</div>
My code:
const tags = ['attr1', 'attr2']
const collection = document.getElementByClassName("list__item")
// convert colelction into array
const arr = [...collection]
arr.forEach(el => {
this.tags.forEach(tag => {
if(tag == el.attributes.attr1.value) {
document.querySelector(".list__item").classList.add('active')
}
})
})
What I'm getting is:
<div class="list">
<div class="list__item" title="attr1" class="active">value 1</div>
<div class="list__item" title="attr1">value 2</div>
<div class="list__item" title="attr1">value 3</div>
<div class="list__item" title="attr2">value 3</div>
<div class="list__item" title="attr2">value 4</div>
<div class="list__item" title="attr2">value 5</div>
<div class="list__item" title="attr2">value 6</div>
</div>
The problem is that for the first iteration it's not adding the class to the first div with attr2

You should iterate over the tags. For each tag, you search for elements that have title equal to the tag. When you find the first one, you stop that specific tag and proceed to the next one.
Notice I use for in the inner loop, not forEach. This is because of the return, which stops the processing of the tag.
const tags = ['attr1', 'attr2']
const collection = document.getElementsByClassName("list__item")
// convert colelction into array
const arr = [...collection]
tags.forEach(tag => {
for(const el of arr) {
if (tag === el.getAttribute('title')) {
el.classList.add('active')
return;
}
}
})
.active { color: red }
<div class="list">
<div class="list__item" title="attr1">value 1</div>
<div class="list__item" title="attr1">value 2</div>
<div class="list__item" title="attr2">value 3</div>
<div class="list__item" title="attr2">value 4</div>
<div class="list__item" title="attr2">value 5</div>
<div class="list__item" title="attr2">value 6</div>
<div class="list__item" title="attr2">value 7</div>
</div>

const tags = ['attr1', 'attr2']
const collection = document.getElementsByClassName("list__item")
// convert colelction into array
const arr = [...collection]
//document.querySelector will always pick the first instance of a selector, even when 2 or more are present
//so for each tag, we can just find the first element with the title, and set that class
for( let tag of tags){
let node = document.querySelector(`[title="${tag}"]`);
node.classList.add("active");
}
<div class="list">
<div class="list__item" title="attr1">value 1</div>
<div class="list__item" title="attr1">value 2</div>
<div class="list__item" title="attr2">value 3</div>
<div class="list__item" title="attr2">value 4</div>
<div class="list__item" title="attr2">value 5</div>
<div class="list__item" title="attr2">value 6</div>
<div class="list__item" title="attr2">value 7</div>
</div>

jQuery convert element ids into comma seperated string

I have a simple html and jquery script like below, I am trying to get a comma seperated list of data-item-id so would look like...
1,2,3,4,5
var items = $('.container').children();
console.log(items);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item" data-item-id="1">Item 1</div>
<div class="item" data-item-id="2">Item 2</div>
<div class="item" data-item-id="3">Item 3</div>
<div class="item" data-item-id="4">Item 4</div>
<div class="item" data-item-id="5">Item 5</div>
</div>
I have grabbed the items but how can I convert this into the comma seperated string?

Map each item to its item-id, then join by commas:
var items = $('.container')
.children()
.map(function() { return $(this).data('item-id') })
.get()
.join(',');
console.log(items);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item" data-item-id="1">Item 1</div>
<div class="item" data-item-id="2">Item 2</div>
<div class="item" data-item-id="3">Item 3</div>
<div class="item" data-item-id="4">Item 4</div>
<div class="item" data-item-id="5">Item 5</div>
</div>
But there's no need for a big library like jQuery to accomplish something this trivial, if you want:
const items = Array.from(
document.querySelectorAll('.container > .item'),
div => div.dataset.itemId
)
.join(',');
console.log(items);
<div class="container">
<div class="item" data-item-id="1">Item 1</div>
<div class="item" data-item-id="2">Item 2</div>
<div class="item" data-item-id="3">Item 3</div>
<div class="item" data-item-id="4">Item 4</div>
<div class="item" data-item-id="5">Item 5</div>
</div>

Because who wouldn't want to add destructuring as well ..... (Kudos to CertainPerformance)
const items = Array.from(
document.querySelectorAll('.container > .item'),
({ dataset: { itemId: i } }) => i
)
.join(',');
console.log(items);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item" data-item-id="1">Item 1</div>
<div class="item" data-item-id="2">Item 2</div>
<div class="item" data-item-id="3">Item 3</div>
<div class="item" data-item-id="4">Item 4</div>
<div class="item" data-item-id="5">Item 5</div>
</div>

Another alternative with JQuery could be using .each() to traverse the items while grabbing the data-item-id with .data() and adding it to a string.
$(document).ready(function()
{
var itemList = "";
$('.container .item').each(function()
{
itemList += $(this).data('item-id') + ",";
});
console.log("Ids:", itemList.slice(0,-1));
});
.as-console {background-color:black !important; color:lime;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item" data-item-id="1">Item 1</div>
<div class="item" data-item-id="2">Item 2</div>
<div class="item" data-item-id="3">Item 3</div>
<div class="item" data-item-id="4">Item 4</div>
<div class="item" data-item-id="5">Item 5</div>
</div>

You can also apply some features of ES5 and ES6 for a shorter solution. And without jQuery.
let itemsIds = [...document.getElementsByClassName("item")]
.map(elem => elem.getAttribute("data-item-id"))
.join(',');
console.log(itemsIds);
<div class="container">
<div class="item" data-item-id="1">Item 1</div>
<div class="item" data-item-id="2">Item 2</div>
<div class="item" data-item-id="3">Item 3</div>
<div class="item" data-item-id="4">Item 4</div>
<div class="item" data-item-id="5">Item 5</div>
</div>

insertAdjacentHTML not inserting passed string correctly

I want to insert html after a particular element but insertAdjacentHTML wont let me add a closing tag first.
If I do
elm.insertAdjacentHTML('afterend', '</div><section class="block">');
the expected result is
<element></element></div><section class="block">
the result it's returning
<element></element><section class="block"></div>
Is there a way around this?
Edit:
Basically what i'm trying to do is loop through each element and split them into two divs
<div class="column">
<div class="block">block 1</div>
<div class="block">block 2</div>
<div class="block">block 3</div>
<div class="block">block 4</div>
<div class="block">block 5</div>
<div class="block">block 6</div>
<div class="block">block 7</div>
<div class="block">block 8</div>
</div>
Expected result
<div class="column">
<div class="block">block 1</div>
<div class="block">block 2</div>
<div class="block">block 3</div>
<div class="block">block 4</div>
</div>
<div class="column">
<div class="block">block 5</div>
<div class="block">block 6</div>
<div class="block">block 7</div>
<div class="block">block 8</div>
</div>
JS
const blocks = document.querySelectorAll(".block");
let half = Math.ceil(blocks.length / 2 - 1);
blocks[half].insertAdjacentHTML('afterend', '</div><div class="column">');

If I get your requirement right, this is what you want to do:
elm.parentNode.insertAdjacentHTML('afterend', '<section class="block"></section>');
If the div is not the direct parent element, you might want to use Element.closest(selector) instead:
elm.closest('div.myDiv').insertAdjacentHTML('afterend', '<section class="block"></section>');
update
You have elaborated on your requirements further, this is how to do it in Javascript:
const blocks = [...document.querySelectorAll('.block')];
const middle = Math.ceil(blocks.length / 2 - 1);
const column = document.querySelector('.column');
const parent = document.querySelector('.parent');
const col1 = document.createElement('div');
col1.className = 'column';
const col2 = document.createElement('div');
col2.className = 'column';
blocks.forEach((block, index) => {
if (index <= middle) {
col1.appendChild(block)
} else {
col2.appendChild(block)
}
})
parent.removeChild(column)
parent.appendChild(col1);
parent.appendChild(col2);
.column+.column {
color: green;
}
<div class="parent">
<div class="column">
<div class="block">block 1</div>
<div class="block">block 2</div>
<div class="block">block 3</div>
<div class="block">block 4</div>
<div class="block">block 5</div>
<div class="block">block 6</div>
<div class="block">block 7</div>
<div class="block">block 8</div>
</div>
</div>
Resulting DOM:

Scrollable tbody issue

: )
I know this question has been asked a lot, but I tried many solutions and just couldn't make it work properly.
I need to make the tbody of my table scrollable with fixed headers.
To start my table is built dynamically and is very large. 19 columns and about 800 rows.
First I worked with the jquery datatables plugin.
After the table is in the container:
var tbl = createFilter('readDataTbl', '', condition);
$('#tableDiv').empty().append(tbl);
$('#readDataTbl').dataTable({
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
});
but that creates a scroll in x and the headers are frozen like that:
Then I tried a css solution as follows:
<style>
table {
border-collapse: collapse;
width: 100%;
}
thead {
text-align:left;
display: table;
float: left;
width: 100%;
}
thead tr {
display: table-row;
width: 100%;
}
tbody {
display: block;
height: 120px;
overflow: auto;
float: left;
width: 100%;
}
tbody tr {
display: table;
width: 100%;
}
tbody tr {
height: 18px;
}
tbody td {
padding:1px 8px;
}
th, td {
width: 25%;
}
tr:after{ /* IE8 fix */
content: ".";
margin-left: -3px; /* to hide the content above tr */ /* not necessary if you are ok with 1px gap */
visibility: hidden;
}
</style>
But that just creates a mess in the tbody like that:
Then I tried thie method from Here
adjusting the THs width after:
css:
<style>
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
</style>
js:
var tbl = createFilter('readDataTbl', '', condition);
$('#tableDiv').empty().append(tbl);
var $table = $('table');
var $bodyCells = $table.find('tbody tr:first').children();
// Get the tbody columns width array
var colWidth = $bodyCells.map(function () {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function (i, v) {
$(v).width(colWidth[i]);
});
And then I noticed the THs long text made them bigger like that:
what could help me achieve my goal?
Thought about inserting divs inside THs but not sure about it..
Thanks! : ]

You can't do this perfectly without some javascript. The best way to accomplish this would be to use a clone of the header, prepend it to the element, apply a fixed position on it and hide the original. Hope this helps. You might also need to bind each column width to the width of the original.

I think you can use bootstrap css and some table styles. You can adjust the th height and width for better results. Also you must calculate the percentage width of tbody td, thead th { ie if you have 19 columns then 100/19 which is around 5%. So your column width will be very less and you will need to increase the height for thead th {
table {
width: 100%;
}
thead,
tbody,
tr,
td,
th {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 50px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td,
thead th {
width: 19.2%;
float: left;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th>Make fg jfdg jfgj fgjfg jfgj fgj fgj g jfgj fgj dfgj fgjfg</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Fordfghdfg jfdgjfdgj fgj fdgj fgjfgj df</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>

You can do this with the help of flex-box layout. It certainly won't work on safari though. All other major browsers render it perfectly.
/* CSS */
html, body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.table {
height: 100%;
width: 100%;
}
.table .tr {
display: flex;
flex-flow: row wrap;
}
.table .tr .td, .table .tr .th {
flex: 1;
}
.table .thead {
padding-right: 17px;
/* this padding accounts for the width of the scroll bar
* you could compute the default scrollbar width for any browser and set this padding accordingly
* else the headers and records will be misaligned by that margin. */
}
.table .viewport {
height: 640px;
overflow: scroll;
}
/* HTML */
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="ftable.css" />
<title>Flex tables</title>
</head>
<body>
<div class="table">
<div class="thead">
<div class="tr">
<div class="th">Column 1</div>
<div class="th">Column 2</div>
<div class="th">Column 3</div>
<div class="th">Column 4</div>
<div class="th">Column 5</div>
</div>
</div>
<div class="viewport tbody">
<div class="canvas">
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
<div class="tr">
<div class="td">Value 1</div>
<div class="td">Value 2</div>
<div class="td">Value 3</div>
<div class="td">Value 4</div>
<div class="td">Value 5</div>
</div>
</div>
</div>
</div>
</body>
</html>

jQuery Rearrange HTML Inside Div

I have HTML like this -
<div class="outerDiv" id="od_1">
<label>Div 1</label>
<div class="innerDiv">Inner Div 1</div>
<div class="innerDiv">Inner Div 2</div>
<div class="innerDiv">Inner Div 3</div>
</div>
<div class="outerDiv" id="od_2">
<label>Div 2</label>
<div class="innerDiv">Inner Div 1</div>
<div class="innerDiv">Inner Div 2</div>
<div class="innerDiv">Inner Div 3</div>
</div>
What I want to achieve through jQuery is this -
<div class="outerDiv" id="od_1">
<label>Div 1</label>
<div class="innerDivBox">
<div class="innerDiv">Inner Div 1</div>
<div class="innerDiv">Inner Div 2</div>
<div class="innerDiv">Inner Div 3</div>
</div>
</div>
<div class="outerDiv" id="od_2">
<label>Div 2</label>
<div class="innerDivBox">
<div class="innerDiv">Inner Div 1</div>
<div class="innerDiv">Inner Div 2</div>
<div class="innerDiv">Inner Div 3</div>
</div>
</div>
I started with looping through div with class "outerDiv" -
$('.outerDiv').each(function(i, obj) {
var divId = this.id;
});
But I am not sure how exactly I should proceed from here. Any help would be appreciated. Thanks.

You could use find() and wrapAll() to group the inner divs with a common parent:
$('.outerDiv').each(function(i, obj) {
$(this).find('.innerDiv').wrapAll('<div class="innerDivBox">');
});
jsFiddle here.

Try this:
$('.outerDiv').each(function() {
$(this).append( $('<div class="innerDivBox"></div>').append( $(this).find('.innerDiv') ) );
});

Categories