For example I have the following HTML structure :
<div class="container">
<div class="field-container">...</div>
<div class="field-container">...</div>
<div class="field-container">...</div>
<div class="field-container-with-details">
<div class="details">...</div>
<div class="details">...</div>
<div class="details">...</div>
<div class="details-to-skip">...</div>
<div class="details-to-skip">...</div>
</div>
</div>
I need to find all inputs in class .container except inputs that are in classes .details-to-skip.
How to do this?
So you can not-selector
$('.container input:not(.details-to-skip input)')
or .not()
$('.container input').not('.details-to-skip input')
$('.container input:not(.details-to-skip input)').after('<span>before</span>');
$('.container input:not(.details-to-skip input)').val('selected')
.field-container-with-details > div {
padding: 5px;
}
.field-container-with-details > .details {
border: 1px solid green;
margin-bottom: 3px;
}
.field-container-with-details > .details-to-skip {
border: 1px solid red;
margin-bottom: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="field-container"></div>
<div class="field-container">...</div>
<div class="field-container">...</div>
<div class="field-container-with-details">
<div class="details">
<input />
</div>
<div class="details">
<input />
</div>
<div class="details">
<input />
</div>
<div class="details-to-skip">
<input />
</div>
<div class="details-to-skip">
<div>
<input />
</div>
</div>
</div>
</div>
You can use filter(). Try this:
var $inputs = $('.container input').filter(function() {
return $(this).closest('.details-to-skip').length == 0;
});
The $inputs variable will now contain a collection of all the inputs that are not contained within those divs.
try this :
$('.container div:not(.details-to-skip) > input')
Unfortunately some answers are incorrectly selecting the inputs where any parent has .details-to-skip.
They tend to re-include the inputs as they are also descendants of the div with class="field-container-with-details"
The filter needs to be more specific:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/z8cqx8kq/1/
e.g.
$('.container div:not(.details-to-skip) > input');
Note: this will ony work if the inputs are direct children of the div.
Rory's answer is actually the most robust as it looks for an ancestor of each input with that class.
Arun P Johny's answer works as if by magic! It applies an ancestor-descendant relationship selector to a descendant (which I did not know would work - until today). Well done Arun :)
Related
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
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>
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');
}
});
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>
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/.