How can I loop through three div boxes at the time - javascript

I have a list of 12 posts wrapped in a div tag and the structure looks like this:
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Is there a way I can loop every third div with the class of content in another div tag?
At the end I would have my structure like this:
<div class="row">
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</div>
Is there a way I can loop every third div with the class of content in another div tag?


You can do something like this
// get all element at position 1,4,7,...etc and iterate
$('.row .content:nth-child(3n + 1)').each(function() {
$(this)
// get all siblings next to it
.nextAll('.content')
// get only next 2 elements from it
.slice(0, 2)
// combine the current element with it
.add(this)
// wrap all elemnts with the div(3 divs)
.wrapAll('<div class="wrapper">')
})
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content').slice(0, 2).add(this).wrapAll('<div class="wrapper">')
})
console.log($('.row')[0].outerHTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Or you can use jQuery :lt() pseudo-class selector to avoid slice() method.
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})
console.log($('.row')[0].outerHTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>


Loop through the children, every third child create a new wrapper and add each child in the respective wrapper.
var test = document.querySelector("#test");
var index = 2;
for (var child of test.querySelectorAll(".content")) {
if (index++ >= 2) {
var newWrapper = test.appendChild(document.createElement("div"));
newWrapper.className = "wrapper";
index = 0;
}
test.removeChild(child);
newWrapper.appendChild(child);
}
console.log(test.innerHTML);
<div class="row" id="test">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>


Try this
function WrapUpAllDivs(){
var CurrentDivs = $(".row",".content");
for(var i = 0; i < CurrentDivs.length -1 ; i+=3) {
CurrentDivs
.slice(i, i+3)
.wrapAll("<div class=\"wrapper\"></div>");
}
}

Related

How to write value of one div into another div

I have the following HTML and I want to pull the value from one div into another and if possible to put a : between them.
It is about to add the value of div class="ITSv" to the value of div class="ITSn"
Source HTML:
<div id="HTML_SPEC"
class="ITSs">
<div class="ITSg">Specifications</div>
<div class="ITSr0">
<div class="ITSn">Battery form</div>
<div class="ITSv">Cylinder</div>
</div>
<div class="ITSg">Batterie</div>
<div class="ITSr0">
<div class="ITSn">battery voltage</div>
<div class="ITSv">1,5 V</div>
</div>
<div class="ITSr1">
<div class="ITSn">Capacity</div>
<div class="ITSv">7800 mAh</div>
</div>
Target format:
<div id="HTML_SPEC"
class="ITSs">
<div class="ITSg">Specifications</div>
<div class="ITSr0">
<div class="ITSn">Batteryform: Cylinder</div>
</div>
<div class="ITSg">Batterie</div>
<div class="ITSr0">
<div class="ITSn">battery voltage: 1,5 V</div>
</div>
<div class="ITSr1">
<div class="ITSn">Capacity: 7800 mAh</div>
</div>

You can do the following
Array.from(document.getElementsByClassName('ITSn')).forEach(element => {
element.innerText += ': ' + element.nextElementSibling.innerText;
element.nextElementSibling.remove();
});
<div id="HTML_SPEC"
class="ITSs">
<div class="ITSg">Specifications</div>
<div class="ITSr0">
<div class="ITSn">Battery form</div>
<div class="ITSv">Cylinder</div>
</div>
<div class="ITSg">Batterie</div>
<div class="ITSr0">
<div class="ITSn">battery voltage</div>
<div class="ITSv">1,5 V</div>
</div>
<div class="ITSr1">
<div class="ITSn">Capacity</div>
<div class="ITSv">7800 mAh</div>
</div>

Don't need Js. Just try with the css display property after pseudo-element
.ITSn:after {
content: ': '
}
.ITSn,
.ITSv {
display: inline-block;
}
<div id="HTML_SPEC" class="ITSs">
<div class="ITSg">Specifications</div>
<div class="ITSr0">
<div class="ITSn">Battery form</div>
<div class="ITSv">Cylinder</div>
</div>
<div class="ITSg">Batterie</div>
<div class="ITSr0">
<div class="ITSn">battery voltage</div>
<div class="ITSv">1,5 V</div>
</div>
<div class="ITSr1">
<div class="ITSn">Capacity</div>
<div class="ITSv">7800 mAh</div>
</div>
</div>

add a css class to an object inside a list [duplicate]

This question already has answers here:
jQuery find an element by its index
(7 answers)
Closed 4 years ago.
I was wondering how I could add a class to a specific object inside a list?
Let me demonstrate the question with some code.
$('.box')[5].addClass('center')
.center{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>
This does not work because I get an error:
Uncaught TypeError: $(...)[5].addClass is not a function
I only want to add the class to the fifth element of the list. What can I do?

$('.box') is an object not an array. So you can not use index like that.
You can simply use eq() selector which selects the element at the specified index within the matched set:
$('.box:eq(5)').addClass('center');
.center{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>

In JQuery there is something called the eq selector
Select the element at index n within the matched set.
Here is how to use it in your instance (remember counting starts at 0)
$('.box:eq( 5 )').addClass('center')
.center {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
c-1
</div>
<div class="box">
c-2
</div>
<div class="box">
c-3
</div>
<div class="box">
c-4
</div>
<div class="box">
c-5
</div>
<div class="box">
c-6
</div>
<div class="box">
c-7
</div>
<div class="box">
c-8
</div>
<div class="box">
c-9
</div>
</div>
I hope you find this helpful.

Hide Parent Div if nested div is empty

I'm trying to hide the outer div when a nested div is empty (including white-space node). I've found a solution that works if there is NO whitespace:
Hide parent DIV if <li> is Empty
I need it to work when there IS white space present, ie:
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"> </div>
</div>
</div>
</div>
Example fiddle

Working fiddle
You could use the both :empty and :contain() selector :
$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide();
Hope this helps.
$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"> </div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Visible if working 2</div>
<div class="content">
<div class="product">text</div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 3</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>

You can iterate over each div.product and trim the text to remove whitespace. If there's anything left, show it, otherwise, hide its wrapper.
$("div.product").each(function() {
if ($(this).text().trim() == '') {
$(this).closest('div.wrapper').hide()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 1</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Visible if working 2</div>
<div class="content">
<div class="product">text</div>
</div>
</div>
</div>
<div class="gen-customer">
<div class="wrapper">
<div class="heading">Hidden if working 3</div>
<div class="content">
<div class="product"></div>
</div>
</div>
</div>

//Try this using Jquery
<script>
//A perfect reference in Jquery...
var element=$('#target_child');
if($(element).html()==''){
$(element).parent().hide()
}else{
//do some work
}
</script>

Applying styles based on jquery conditions

I have a following html as follows:
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have to apply "border-width:10px" for all divs with class = innerdiv provided that "outerdiv" contains both "title" and "innerdiv"
.
My expected output is:
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying this:
$(element).find(".outerdiv").not("[class="title"]).css("border-width","10px").
Edit: The number of divs are dynamic and not fixed in number

You need to use :has selector along with immediate child selector to target innerdiv element:
$('.outerdiv:has(.innerdiv):has(.title) > ,.title > .innerdiv ').css("border-width","10px");
DEMO SNIPPET :
$(function(){
$('.outerdiv:has(.innerdiv):has(.title) > .title > .innerdiv ').css("border-width","100px").css('border' ,'1px solid grey')
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outerdiv">
<div class="title">1
<div class="innerdiv">2
<div class="outerdiv">3
<div class="title">4
<div class="innerdiv">5
<div class="outerdiv">6
<div class="innerdiv">7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You can do this with good css hierarchy just apply the styles to
.outerdiv > .title > .innerdiv{
css goes here
}
and they will only affect divs in the hierarchy that you mentioned.

Simply use:
$('.innerdiv').css('border-width','10px');
It will add border-width to all divs with class 'innerdiv'.

Search within site and return items based on location

html want to show items based on the location in .offer_miliage
<div class="offer_list clearfix">
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_01.jpg" alt=""/>
</div>
<div class="offer_aside">
<h2>Project 1</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">32.690</div> <span class="offer_miliage">Nungambakkam</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_02.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 2</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">56.300</div> <span class="offer_miliage">Choolaimedu</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_03.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 3</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">47.000</div> <span class="offer_miliage">T Nangar</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_04.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 4</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">26.750</div> <span class="offer_miliage">Pallavaram</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_05.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 5</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">33.300</div> <span class="offer_miliage">Tambaram</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_06.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 6</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">44.300</div> <span class="offer_miliage">fort</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_07.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 7</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">48.500</div> <span class="offer_miliage">Fort</span>
</div>
</div>
</div>
<div class="offer_item clearfix">
<div class="offer_image"><img src="images/temp/prod_img_08.jpg" alt="">
</div>
<div class="offer_aside">
<h2>Project 8</h2>
<div class="offer_descr">
<p>content description</p>
</div>
<div class="offer_data">
<div class="offer_price">63.300</div> <span class="offer_miliage">Nungambakkam</span>
</div>
</div>
</div>
</div>
<div class="widget-container widget_adv_filter">
<h3 class="widget-title">ADJUST SEARCH RESULTS</h3>
<form action="#" method="get" class="side_form">
<div class="row field_select" style="z-index:8">
<label class="label_title">Location:</label>
<select class="select_styled white_select" name="car_year" id='select'>
<option value="1">Pallavaram</option>
<option value="2">T Nagar</option>
<option value="3">Nungambakkam</option>
<option value="4">Choolaimedu</option>
<option value="5">Fort</option>
</select>
</div>
<div class="row rowSubmit"> <span class="btn btn_search"><input type="submit" value="SEARCH" onClick="go_button();"></span>
</div>
how to show items which are having same location when click in searched button. I have started java script but couldn't advance.
here is java script
<script type="text/javascript">
function go_button(){
var loc=document.getElementByClassName('offer_miliage')[0].innerText;
if(document.getElementById('select').value==1){
//what to write to update .offer_list with .offer_item that
//have .offer_miliage text pallavaram
}
};
</script>
friend can u please tell me whats wrong with this script
function go_button(){
if(document.getElementById('select').value==1){
$(function() {
$(".offer_item").search(function(a) {
// Find the location name from element
var priceAText = $(a).find(".offer_miliage").text();
// Return the result
if(priceAText=="Pallavaram"){return true;}
}).each(function() {
// Add all the elements back into the parent, in order
$(this).appendTo(".offer_list");
});
});
}
};

Your working example with jQuery: http://jsfiddle.net/9VQRt/ (highlight found data with red background).
$('body').on('click', '.search_button', function() {
var offerCollection = $('.offer_miliage');
$.each(offerCollection, function(ind, val) {
if($("#select option:selected").text() == val.innerHTML) {
$(this).addClass('red_bg');
}
});
});

Categories