How to add div with class every second item

How to add div with class every second item - javascript

Please help..
How to add div with class every second item.
I have a list item:
<div class="col-sm-3">
<div class="product rotation">
<div>data 1</div>
</div>
<div class="product rotation">
<div>data 2</div>
</div>
<div class="product rotation">
<div>data 3</div>
</div>
<div class="product rotation">
<div>data 4</div>
</div>
</div>
I want to add div with class every second item:
<div class="col-sm-12">
<div class="col-sm-3 col-md-3 double-product">
<div class="product rotation">
<div>data 1</div>
</div>
<div class="product rotation">
<div>data 2</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-3 col-md-3 double-product">
<div class="product rotation">
<div>data 3</div>
</div>
<div class="product rotation">
<div>data 4</div>
</div>
</div>
</div>
How to add div with class every second item.
Thank you.

In order to achieve the output provided in your code, use the following.
This uses wrapAll() in a loop.
products = $('.product');
for(var i = 0; i < products.length; i+=2) {
products.slice(i, i+2).wrapAll('<div class="col-sm-12"><div class="col-sm-3 col-md-3 double-product"></div></div>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-sm-3">
<div class="product rotation">
<div>data 1</div>
</div>
<div class="product rotation">
<div>data 2</div>
</div>
<div class="product rotation">
<div>data 3</div>
</div>
<div class="product rotation">
<div>data 4</div>
</div>
</div>

Related

Filter different divs with list

I have some divs with different content in it. On the left side i have got a list with differenct categories. With a click on a categorie I want to load the div of this category.
At the beginning I want to have the main category loaded. So there is no option to show all elements.
var $eBayElements = $('.row > div.col-lg-9');
$('.filter_link').click(function(e){
e.preventDefault();
var filterVal = $(this).data('filter');
$eBayElements.hide().filter(filterVal).show();
});;
<section class="area1">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title text-center pb-10">
<h3 class="title">Aktuelle Angebote</h3>
<p class="text">Hier werden Dir einige Angebote angezeigt. Schau Dich einfach um!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="offer-menu text-center mt-50">
<ul>
<li class="filter_link" data-filter=".main" class="active">Alles</li>
<li class="filter_link" data-filter=".handys">Handys</li>
<li class="filter_link" data-filter=".spiele">Videospiele</li>
<li class="filter_link" data-filter=".books">Bücher</li>
<li class="filter_link" data-filter=".toys">Spielzeug</li>
<li class="filter_link" data-filter=".cams">Kameras</li>
<li class="filter_link" data-filter=".auktionen">Auktionen</li>
</ul>
</div>
</div>
<div class="col-lg-9 col-md-9 main">
<div>...</div>
</div>
<div class="col-lg-9 col-md-9 handys">
<div>...</div>
</div>
<div class="col-lg-9 col-md-9 spiele">
<div>...</div>
</div>
<div class="col-lg-9 col-md-9 books">
<div>...</div>
</div>
<div class="col-lg-9 col-md-9 toys">
<div>...</div>
</div>
<div class="col-lg-9 col-md-9 cams">
<div>...</div>
</div>
<div class="col-lg-9 col-md-9 auktionen">
<div>...</div>
</div>
</div>
</section>
Unfortunately it does not work porperly. It would be very nice if anyoine could help me with that. Thank you very much!

$(".filter_link").click(function(e){
$('.row > div.col-lg-9').hide()
$($(this).data("filter")).show()
});
.handys, .spiele, .books, .toys, .cams, .auktionen{
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="area1">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title text-center pb-10">
<h3 class="title">Aktuelle Angebote</h3>
<p class="text">Hier werden Dir einige Angebote angezeigt. Schau Dich einfach um!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="offer-menu text-center mt-50">
<ul>
<li class="filter_link" data-filter=".all" class="active">Alles</li>
<li class="filter_link" data-filter=".handys">Handys</li>
<li class="filter_link" data-filter=".spiele">Videospiele</li>
<li class="filter_link" data-filter=".books">Bücher</li>
<li class="filter_link" data-filter=".toys">Spielzeug</li>
<li class="filter_link" data-filter=".cams">Kameras</li>
<li class="filter_link" data-filter=".auktionen">Auktionen</li>
</ul>
</div>
</div>
<div class="col-lg-9 col-md-9 all">
<div>All</div>
</div>
<div class="col-lg-9 col-md-9 handys">
<div>Handy</div>
</div>
<div class="col-lg-9 col-md-9 spiele">
<div>Sp</div>
</div>
<div class="col-lg-9 col-md-9 books">
<div>Bool</div>
</div>
<div class="col-lg-9 col-md-9 toys">
<div>toys</div>
</div>
<div class="col-lg-9 col-md-9 cams">
<div>cams</div>
</div>
<div class="col-lg-9 col-md-9 auktionen">
<div>.aut</div>
</div>
</div>
</div>
</section>

At first, you need all categories into one div. also you used data attribute with classname.
in my example i've called like you "all"
<div class="col-lg-9">
<div class="all">
<div class="handys">
<div>handys</div>
<div>handys 2</div>
<div>handys 3</div>
</div>
<div class="spiele">
<div>spiele</div>
<div>spiele 2</div>
<div>spiele 3</div>
</div> ....
</div>
</div>
script
var $shopElements = $('.offer-menu ul');
$('.filter_link').click(function(e) {
var filterVal = $(this).data('filter');
$(".all > div").show();
if(filterVal == "all") return;
$(".all > div:not(." + filterVal + ")").hide();
});
working example on jsFiddle: https://jsfiddle.net/wjs640kt/
or same code here at Run code snippet:
var $shopElements = $('.offer-menu ul');
$('.filter_link').click(function(e) {
var filterVal = $(this).data('filter');
$(".all > div").show();
if(filterVal == "all") return;
$(".all > div:not(." + filterVal + ")").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="section-title text-center pb-10">
<h3 class="title">Aktuelle Angebote</h3>
<p class="text">Hier werden Dir einige Angebote angezeigt. Schau Dich einfach um!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="offer-menu text-center mt-50">
<ul>
<li class="filter_link" data-filter="all" class="active">Alles</li>
<li class="filter_link" data-filter="handys">Handys</li>
<li class="filter_link" data-filter="spiele">Videospiele</li>
<li class="filter_link" data-filter="books">Bücher</li>
<li class="filter_link" data-filter="toys">Spielzeug</li>
<li class="filter_link" data-filter="cams">Kameras</li>
<li class="filter_link" data-filter="auktionen">Auktionen</li>
</ul>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9">
<div class="all">
<div class="handys">
<div>handys</div>
<div>handys 2</div>
<div>handys 3</div>
</div>
<div class="spiele">
<div>spiele</div>
<div>spiele 2</div>
<div>spiele 3</div>
</div>
<div class="books">
<div>books</div>
<div>books 2</div>
<div>books 3</div>
</div>
<div class="toys">
<div>toys</div>
<div>toys 2</div>
<div>toys 3</div>
</div>
<div class="cams">
<div>cams</div>
<div>cams 2</div>
<div>cams 3</div>
</div>
<div class="auktionen">
<div>auktionen</div>
<div>auktionen 2</div>
<div>auktionen 3</div>
</div>
</div>
</div>
</div>
</div>

Find closest div inside another div

Sample:
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>
When i click "column_expand_list" i need to find closest "element". I have a function, but I don't understand why it doesn't work:
console.log($(this).parent().parent().closest('.element'));
What am I doing wrong?

In your HTML there is no closest element with the class element. You can get the closest .table_element and from this element you can then navigate to the next() or prev() .element
closest() only traveres the DOM in the UP direction, that's why you can't find it from the clicked element you are on.
$('.column_expand_list').on('click', function() {
console.log($(this).closest('.table_element').next('.element'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>

I guess this is just a repetition od #Cloned and #AlwaysHelping's answers, but anyway, here it is:
$(".column_expand_list").click(function(){console.log($(this).closest(".table_element").prev()[0])})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X this will not find a suitable "parent"</div>
</div>
<div class="element">YAY 1</div>
<div class="table_element">
<div class="column_expand_list">X click here.</div>
</div>
<div class="element">YAY 2</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>

You could simply use one .parent to go back .next() to get the div.element - you are using parent twice which takes you out of the actual parent table_cover div
Using .next() like this:
$(this).parent('div').next('.element').text()
Demo:
$('.column_expand_list').click(function() {
console.log($(this).parent('div').next('.element').text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 1</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 2</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 3</div>
</div>

Creating a layout using bootstrap grid with polygonal shape

I am trying to create a layout using bootstrap grid in polygonal shape but somehow the layout height is not matching, I tried to match height using JS but cant get it, may be if somebody have idea of doing it in other way, please help!
Here is the example how I am trying to achieve, please note that every column would have hover effect as well and in the same shape as its showing by default:
Here is JSfiddle demo
CSS
<style>
.main-wrapper{float:left; width:100%; background:#cccccc;}
.col-md-3{border: 1px solid black;}
.overflowH{overflow: hidden;}
</style>
HTML
<div class="container-fluid">
<div class="row fullH overflowH">
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
</div>
</div>
</div>
jQuery
//Resize div height to viewport size
function setHeight() {
windowHeight = $(window).innerHeight();
$('.fullH').css('height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
//Rotated box
$('.col-md-3').height( Math.round( $('.col-md-3').width() ) * Math.tan(0.523599) );
$('.col-md-3').css('transform', 'skewY(-30deg)');

As mentioned above by #Brett Gregson rotating row instead of column should be good idea, check the code below, I have created custom col instead of bootstrap so you just need to write media query for that to make it work in responsive.
Here is the code:
CSS
.col-md-25{border: 1px solid black; width:20%; float:left;}
HTML
<div class="container-fluid">
<div class="row" style="margin-top:-465px;">
<div class="col-md-25"></div>
<div class="col-md-25"></div>
<div class="col-md-25"></div>
<div class="col-md-25"></div>
<div class="col-md-25"></div>
</div>
<div class="row">
<div class="col-md-25">Text Here 1</div>
<div class="col-md-25">Text Here 2</div>
<div class="col-md-25">Text Here 3</div>
<div class="col-md-25">Text Here 4</div>
<div class="col-md-25">Text Here 5</div>
</div>
<div class="row">
<div class="col-md-25">Text Here 1</div>
<div class="col-md-25">Text Here 2</div>
<div class="col-md-25">Text Here 3</div>
<div class="col-md-25">Text Here 4</div>
<div class="col-md-25">Text Here 5</div>
</div>
<div class="row">
<div class="col-md-25">Text Here 1</div>
<div class="col-md-25">Text Here 2</div>
<div class="col-md-25">Text Here 3</div>
<div class="col-md-25">Text Here 4</div>
<div class="col-md-25">Text Here 5</div>
</div>
</div>
jQuery
$('.col-md-25').height( Math.round( $('.col-md-25').width() ) * Math.tan(0.523599) );
$('.row').css('transform', 'skewY(-25deg)');

Wrapping slider in div decreasing height

Im using this slider .
Here is demo link
http://www.idangero.us/sliders/swiper/demos/main-demos/17-responsive.html
but I want to wrap this slider in a div but when i do it decreases the height to 125px from 100%
original code
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide red-slide">
<div class="title">Slide 1</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 2</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 3</div>
</div>
<div class="swiper-slide green-slide">
<div class="title">Slide 4</div>
</div>
<div class="swiper-slide pink-slide">
<div class="title">Slide 5</div>
</div>
<div class="swiper-slide red-slide">
<div class="title">Slide 6</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 7</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 8</div>
</div>
</div>
<div class="pagination"></div>
</div>
my code:
<div class="bodycontent">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide red-slide">
<div class="title">Slide 1</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 2</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 3</div>
</div>
<div class="swiper-slide green-slide">
<div class="title">Slide 4</div>
</div>
<div class="swiper-slide pink-slide">
<div class="title">Slide 5</div>
</div>
<div class="swiper-slide red-slide">
<div class="title">Slide 6</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 7</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 8</div>
</div>
</div>
<div class="pagination"></div>
</div>
</div>

Just add this CSS:
.bodycontent {
height: 100%
}

Remove elements in DOM

can some one show how to work with few elements in DOM and move them from one block to another, I need use jQuery, for example I have this structure
<div class="block">
<div class="block_left">
<div class="title">title 1</div>
<div class="image">image 1 for title 1</div>
</div>
<div class="block_right">
</div>
</div>
<div class="block">
<div class="block_left">
<div class="title">title 2</div>
<div class="image">image 2 for title 2</div>
</div>
<div class="block_right">
</div>
</div>
<div class="block">
<div class="block_left">
<div class="title">title 3</div>
<div class="image">image 3 for title 3</div>
</div>
<div class="block_right">
</div>
</div>
<div class="block">
<div class="block_left">
<div class="title">title 4</div>
<div class="image">image 4 for title 4</div>
</div>
<div class="block_right">
</div>
</div>
I was trying to use jQuery .each() but not that I need. In result I need this:
<div class="block">
<div class="block_left">
<div class="title">title 1</div>
</div>
<div class="block_right">
<div class="image">image 1 for title 1</div>
</div>
</div>
<div class="block">
<div class="block_left">
<div class="title">title 2</div>
</div>
<div class="block_right">
<div class="image">image 2 for title 2</div>
</div>
</div>
<div class="block">
<div class="block_left">
<div class="title">title 3</div>
</div>
<div class="block_right">
<div class="image">image 3 for title 3</div>
</div>
</div>
<div class="block">
<div class="block_left">
<div class="title">title 4</div>
</div>
<div class="block_right">
<div class="image">image 4 for title 4</div>
</div>
</div>
How do I remove elements? Thanks

To append the .image elements to the next .block_right elements you can do
$('.block_right').append(function() {
return $(this).prev().find('.image');
});
FIDDLE

$(".image").each(function() {
$(this).parent().parent().find(".block_right").append($(this));
});
Try that code, should work!
Goodluck.

One possible solution with .each():
$('.block .image').each(function() {
$(this).closest('.block').find('.block_right').append(this);
});
DEMO: http://jsfiddle.net/6afBy/

Try to use appendTo() here:
$('.block_left .image').each(function() {
$(this).appendTo($(this).parent().next());
});
Fiddle Demo

Develop Reference

JavaScript is the programming language of the Web.

How to add div with class every second item - javascript

Related

Filter different divs with list

Find closest div inside another div

Creating a layout using bootstrap grid with polygonal shape

Wrapping slider in div decreasing height

Remove elements in DOM

Categories

Resources