Insert each div inside next div (jQuery) - javascript

How can I insert div.one into his next div.two with jquery?
What it is:
<div id="list">
<div class="box one"></div>
<div class="box two"></div>
<div class="box one"></div>
<div class="box two"></div>
<div class="box one"></div>
<div class="box two"></div>
</div>
What I want:
<div id="list">
<div class="box two">
<div class="box one"></div>
</div>
<div class="box two">
<div class="box one"></div>
</div>
<div class="box two">
<div class="box one"></div>
</div>
</div>
What I tried (but it insert all div.one in every div.two):
$("#list .box.one").each(function() {
$(this).prependTo(".box.two").next();
});
Whats my fail?


You were close:
$("#list .box.one").each(function() {
$(this).prependTo($(this).next());
});
using the class in the preprendTo() function will of course select all the .box.two elements, instead by doing $(this).next() we only get the very next sibling element.


This should do what you want:
$("#list .box.one").each(function (index) {
$(this).prependTo($("#list .box.two")[index]);
});

Related

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>

how to get a class name inside the Ext.select('.classname') and remove one of the divs from within-EXTJS

I am trying to check if a class exists inside this parent class:
var index = 1;
Ext.select(".test").elements[index];
here is the o/p from above:
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3">
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="remove-child"></div>
</div>
</div>
now im trying to find which of the divs with class="div3" does not have a child with class="hidden" and I want to remove that div with class="remove-child" and replace it with another div, say <div class="new-child"></div>, so that o/p would be:
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3">
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="new-child"></div>
</div>
</div>
is this possible? Thanks!

Use a not selector to match the child(ren) and replace:
Ext.select('.div3 > :not(.hidden)').replaceWith({
cls: 'new-child',
html: 'New'
});
Fiddle.

jQuery show/hide methods arent working

Here is my codepen for you guys to play with.... CodePen.io
I cannot seem to get the #play-again button to show up once a game has finished using $('#play-again').show().
Any thoughts on this???
Update Added raw html link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="banner">
<p>tic-tac-toe</p>
<button id="play-again"> <i class="fa fa-repeat"></i></button>
</div>
<div class="board">
<div class="row" id="row-1">
<div class="col" id="col-1-1">
<div class="content"></div>
</div>
<div class="col" id="col-1-2">
<div class="content"></div>
</div>
<div class="col" id="col-1-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-2">
<div class="col" id="col-2-1">
<div class="content"></div>
</div>
<div class="col" id="col-2-2">
<div class="content"></div>
</div>
<div class="col" id="col-2-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-3">
<div class="col" id="col-3-1">
<div class="content"></div>
</div>
<div class="col" id="col-3-2">
<div class="content"></div>
</div>
<div class="col" id="col-3-3">
<div class="content"></div>
</div>
</div>
</div>
</div>
The issue is that you must place the button#play-again outside the p when i changed, it is working for me

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)');

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

Categories

Resources