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

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

Related

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

How do you add a class to parents only if two separate child divs are present

How do you add a class to parents only if two separate child divs are present?
The code here works if the two classes are present in a child
$('.class1.class2').parents().addClass('newclass');
<div class="parentdiv">
<div class="class1 class2">
</div>
I am trying to add class to parentdiv only if class1 and class2 are children
<div class="parentdiv">
<div class="class1">
</div>
<div class="someother">
</div>
<div class="class2">
</div>
You can use :has() with selector .class1 ~ .class2, .class2 ~ .class 1 to select .parentdiv element where .class1 or .class2 is child element is a general sibling of .class2 or .class1 respectively. If requirement is to select .parentdiv only if .class1 is followed by .class2 you can use selector .class1 ~ .class2
$(".parentdiv:has(.class1 ~ .class2, .class2 ~ .class 1)")
.addClass("selected");
.selected {
color:olive;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentdiv">
<div class="class1">class1
</div>
<div class="someother">smoother
</div>
<div class="class2">class2
</div>
</div>
<div class="parentdiv">
<div class="class1">class1
</div>
<div class="someother">smoother
</div>
<div class="class3">class3
</div>
Use .filter to select only those elements which satisfy condition provided in callback
var filtered = $('.parentdiv').filter(function() {
return $(this).find('.class1').length > 0 && $(this).find('.class2').length > 0;
});
filtered.addClass('newclass')
.newclass {
border: 2px black dotted;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="parentdiv">
<div class="class1">
Hello class1
</div>
<div class="someother">
</div>
<div class="class2">
Hello class2
</div>
</div>

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

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>

How to skip some divs to search in context?

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 :)

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