clone a div and insertAfter last child of siblings within relative parents - javascript

My markup like this:--
<div class="wrap">
<div class="a"></div>
<div class="a"></div>
<button type="button">press</button>
</div>
.
.
.
<div class="wrap">
<div class="z"></div>
<button type="button">press</button>
</div>
I want when I click the button it clone only one closest siblings and insert the clone div after the last siblings within relative parent div.wrap. I know how to clone with jQuery but I couldn't insert the cloned div after last siblings within relative parent .

You can use .before() to insert before the button and .prev() to clone the div above the button:
$('.wrap > button').on('click', function() {
$(this).before( $(this).prev().clone() );
});
$('.wrap > button').on('click', function() {
$(this).before( $(this).prev().clone() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="a">A1</div>
<div class="a">A2</div>
<button type="button">press</button>
</div>
<div class="wrap">
<div class="z">Z1</div>
<button type="button">press</button>
</div>

If I understand correctly, you should be able to use .prev() to find the previous div, then append a clone using .after().
$(".wrap button").click(function() {
var prev = $(this).prev("div");
prev.after(prev.clone());
});
div {
margin: 5px;
}
.a {
height: 100px;
width: 100px;
background-color: green;
}
.z {
height: 100px;
width: 100px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="a"></div>
<button type="button">press</button>
</div>
<div class="wrap">
<div class="z"></div>
<button type="button">press</button>
</div>

if i correctly understood problem
$('button').on('click', function(){
var siblings = $(this).siblings();
siblings.last().clone().insertAfter(siblings.last() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="a">a1</div>
<div class="a">a2</div>
<button type="button">press</button>
</div>
.
.
.
<div class="wrap">
<div class="z">z1</div>
<button type="button">press</button>
</div>

Related

jQuery .next() div showing all siblings instead of just one

I'm testing a pagination type where the buttons are on a separate div from the target.
When I try to toggle the next div of the body, all of them are toggling, instead of just one.
$('#next_q').on('click', function(){
$('.question-item').hide().next('.question-item').show();
})
.question-item:not(:first-child){display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button>Prev</button>
<button id="next_q">Next</button>
</div>
use :visible to select the question-item that is currently visible
$('#next_q').on('click', function(){
$('.question-item:visible').hide().next('.question-item').show();
})
also if you want it not to "skip" past the last element, use
if ($('.question-item:visible').prev('.question-item').length)
$('#next_q').on('click', function() {
if ($('.question-item:visible').next('.question-item').length)
$('.question-item:visible').hide().next('.question-item').show();
})
$('#prev_q').on('click', function() {
if ($('.question-item:visible').prev('.question-item').length)
$('.question-item:visible').hide().prev('.question-item').show();
})
.question-item:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button id="prev_q">Prev</button>
<button id="next_q">Next</button>
</div>
You can use .data() to store an integer reflecting an index of the .question-item elements .length, use ++ and % operators to cycle the indexes passed to .eq() from current index or 0 through .question-items .length
$('#next_q')
.data({
"index": 0,
items: $(".question-item")
})
.on("click", function() {
$(this).data().items
.hide()
.eq(++$(this).data().index % $(this).data().items.length)
.show();
})
.question-item:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button>Prev</button>
<button id="next_q">Next</button>
</div>
Check the current visible .question-item and hide it and then show the next .question-item. I also added the not last-child selector since I thought that you might want to stop at the last question.
$('#next_q').on('click', function(){
$('.question-item:visible:not(:last-child)').hide().next('.question-item').show();
});
$('#prev_q').on('click', function(){
$('.question-item:visible:not(:first-child)').hide().prev('.question-item').show();
});
.question-item:not(:first-child){display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button id="prev_q">Prev</button>
<button id="next_q">Next</button>
</div>

jQuery not child of class

If I have:
<div class="wrapper">
<div>
<div class="list">
</div>
</div>
<div class="wrapper">
<div class="list">
</div>
</div>
<div class="list">
</div>
</div>
When I have a jQuery instance of a 'wrapper' div, how can I find things in that div, but not in any child 'wrapper' div?
I want to wrapper.find('.list') and get the first and third lists, but not the second. wrapper.find('.list').not('.wrapper .wrapper *') seems to work, but not sure if there's something better.
I think you might be looking for something like this:
var $target = $(".wrapper .list").filter(function(){
return $(this).parents(".wrapper").length === 1;
});
$target.css("background-color", "coral");
div{
min-height: 10px;
min-width: 10px;
padding: 10px;
border: solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
<div class="list"></div>
</div>
<div class="wrapper">
<div class="list"></div>
</div>
<div class="list"></div>
</div>
Use selector :only-child.
For your example :
$('.wrapper:only-child').children('.list');
Will only return all the first level '.list' divs.
I guess something like this could solve your problem:
$( ".wrapper:first" ).children( ".list" )
Where $( ".wrapper:first" ) would get only the first appearance of .wrapper, and children( ".list" ) would get only its children
I hope that's what you are looking for

jquery - Changing styling of a class containing a particular child class

I want the height of .pst to be increased if it contains a child class .pa , the code below doesn't work, and if i use '.pst' instead of this keyword all the div elements with .pst changes. Help!
window.onload = function() {
if($('.pst').contents().find('.pa').length !=0){
$(this).css('height','+=200px');
}
}
<div class="pst">
<div class="pa"></div>
<div class="pa"></div>
<div class="pa"></div>
<div class="pa"></div>
</div>
<div class="pst">
<div class="pb"></div>
<div class="pb"></div>
<div class="pb"></div>
<div class="pb"></div>
</div>
You can simplify it with :has selector:
window.onload = function() {
$('.pst:has(.pa)').css('height', '+=200px');
}
Above will select and increase height of only those .pst which have .pa descendants.
No need to check contents, just target the class combination you want using $('.pst .pa'). Then you can loop the items using each().
Here's a runnable snippet:
$(function() {
$('.pst .pa').each(function() {
$(this).css('height','+=200px');
});
});
.pa {background-color: blue; margin: 5px; height:50px; width:50px; float:left}
.pb {background-color: blue; margin: 5px; height:50px; width:50px; float:left}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pst">
<div class="pa"></div>
<div class="pa"></div>
<div class="pa"></div>
<div class="pa"></div>
</div>
<div class="pst">
<div class="pb"></div>
<div class="pb"></div>
<div class="pb"></div>
<div class="pb"></div>
</div>
I want the height of .pst to be increased if it contains a child class .pa
You are using $(this) in if condition which refers to the global window object not to the current .pst element.
Consider using each:
$('.pst').each(function(){
if($(this).find('.pa').length){
$(this).css('height','+=200px');
}
});

How can I find IDs of DIVS, and assign those names as classes to other DIVS?

I'm fairly new to jquery and cannot figure this out. I have 3 divs with different id's but all start with "sharedform". I want to loop through those divs, grab each id and assign it as an identifying class to the 'slideHead' div preceding each. Any help would be greatly appreciated!
HMTL:
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.upload_image">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.Event">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.BackGround_All">
<p></p>
</div>
</div>
jquery:
var $getclass = $(".drawer");
addclass = $getclass.find('[id^="sharedform"]').attr('id');
$(".slideHead").addClass(addclass);
I'd suggest:
// get all elements whose id starts with 'sharedform', iterate over that collection:
$('div[id^=sharedform]').each(function (){
// find the parent of the 'this' element:
$(this).parent()
// find the previous element, if it matches the passed-in selector:
.prev('.slideHead')
// add the id of the element we initially selected as a class:
.addClass(this.id);
});
$('div[id^=sharedform]').each(function() {
$(this).parent().prev('.slideHead').addClass(this.id);
});
div {
width: 80%;
margin: 0 auto;
min-height: 2em;
padding: 0.5em;
border: 1px solid #000;
}
.slideHead {
background-color: #f00;
}
.slideHead.sharedform\.something {
background-color: #0f0;
}
<div class="slideHead"></div>
<div>
<div id="sharedform.something">some text in the div</div>
</div>
But note that those class-names are problematic, given the inclusion of a period (.) in the id.
This should do it:
$('[id^=sharedform]').each(function() {
$(this).closest('.drawer').prev().addClass( this.id );
});
$('[id^=sharedform]').each(function() {
$(this).closest('.drawer').prev().addClass( this.id );
});
var newHTML = $('body').html(),
out = $('<pre/>', {class:'out'}).appendTo( 'body' );
out.text( 'NEW HTML\n' + newHTML );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.upload_image">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.Event">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.BackGround_All">
<p></p>
</div>
</div>

Display only one div and hide the rest using index

I want to have a function that will fadeIn() a div with class image on hover on another class. However there are multiple divs from each class and would like to have each div correspond to another. I havet hought about using index() to get the inex number of each class and then equal each index number to only display the one corresponding.
To clarify I'll express it as code:
<div class="container">
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
</div>
<div class="img_container">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
The idea is that when hovering the first woot div it will display the first image div, if hovering the second one it will display the second one and the same process for the rest.
<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
//use css selection in jquery
$('container span:nth-child(1))
$('container span:nth-child(2))
$('container span:nth-child(3))
$('container span:nth-child(4))
I hope this will help you.
Try the code below:
$(document).ready(function() {
$(".woot").hover(
function() {
$(".image:eq(" + $(this).index() + ")").show();
},
function() {
$(".image:eq(" + $(this).index() + ")").hide();
}
);
});
.woot {
width: 100px;
height: 100px;
background-color: black;
}
.image {
width: 100px;
height: 100px;
background-color: blue;
display: none;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
</div>
<div class="img_container">
<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>
</div>
With this solution, you got to set ALL the .img_container div to display:none.
CSS
.img_container div{display:none;}
jQuery
$('.container div').on('mouseenter', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).show();
})
$('.container div').on('mouseleave', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).hide();
})
JSFIDDLE: http://jsfiddle.net/sz7am8Lt/.
With this solution you got to set ALL the .img_container div to visibility:hidden.
CSS
.img_container div{visibility:hidden;}
jQuery
$('.container div').on('mouseenter', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).css('visibility','visible');
})
$('.container div').on('mouseleave', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).css('visibility','hidden');
})
JSFIDDLE: http://jsfiddle.net/sz7am8Lt/1/.

Categories