This question already has answers here:
Difference between these selectors [duplicate]
(2 answers)
Closed 8 years ago.
In a web page, there are multiple div elements, some of which have a class of 'class1'.
Question: Will both the below selectors give us all div elements having a class of class1?
$("div .class1")
$("div.class1")
The first one will select an element that has the class class1 that is a descendant of a div.
<div>
<p class="class1">text</p> <-- selected
</div>
The second one will select a div that has the class class1.
<div class="class1"> <-- selected
<p>text</p>
</div>
Will both the below selectors give us all div elements having a class
of class1?
No, only the second one, $("div.class1"), will. In both jQuery and CSS, a space in front of a class means that you are looking for a descendant element with that class.
The two selectors do very different things.
This selector:
$("div .class1")
will return any element (regardless of element type) which has a class of class1 and is a descendant (immediate or otherwise) of a div (regardless of that div's class, if any).
This selector:
$("div.class1")
will return any div which has a class of class1.
The first selector gives you all the .class1 elements that are descendants of any <div> element.
The second will give you all the .class1 elements that are actually <div>s themselves.
Nop.
The first one will give you elements in div which have class class1 and the second one will give you the div with class 'class1`.
The difference between the to selectors you've posted is the element hierarchy.
Lets say that you have a code like this:
<div class="class1">
This is a div with class name class1
</div>
<div>
This is a div with no class name</div>
<span class="class1">This is a span with class name class1</span>
<div class="class1">
This is a div with class name class1
</div>
<div>
This is a div with no class name
<p class="class1">This is a paragraph with class name class1</p>
</div>
<div class="class1">
This is a div with class name class1
</div>
<div class="class1">
This is a div with class name class1
<div class="class1">
This is a div with class name class1
</div>
</div>
The selector $("div .class1") will return you all the elements inside of <div> element which has the class name class1. In our example, that would be <span class="class1">...</span>, <p class="class1">...</p> and the last div <div class="class1">...</div>
whereas the selector $("div.class1") will return you all the elements of <div> which has the class name class1. In our example, that would be all instances of <div class="class1">.
here's a fiddle to help you understand more: http://jsfiddle.net/fatgamer85/m99onozo/1/
hope this helps.
Related
I'm looking for a way to select the first child element of multiple parent divs, of which the parent divs have the same class. This is my HTML:
<div class="wrapper">
<p>Select this paragraph</p>
</div>
<div class="wrapper">
<img src="https://picsum.photos/200/300" title="Select this image">
<p>Don't select this</p>
</div>
<div class="wrapper">
<p>Select this paragraph</p>
<p>Don't select this paragraph</p>
</div>
Please see my full CodePen Here.
I'm trying to select the first child element of each div with the class wrapper and apply the same class to all of these child elements. I was looking at something in the lines of this:
$('.wrapper').children(":first").addClass("noMargin");
The problem with this is that it only selects the child element of the first parent div, but it doesn't select the img and the first p of the third wrapper. I figured you need some kind of array for this and apply a class to all of them, but how can I achieve this (with preferably jQuery)?
You're close, what you need is to go through the elements that have the .wrapper class and append the noMargin class to their first children i.e
$('.wrapper').each(function() {
$(this).children(":first").addClass("noMargin");
});
you can use following sample it is working fine
$('.wrapper :nth-child(1)').addClass("noMargin");
or another syntax
$('.wrapper :first-child').addClass('noMargin');
I have two div on my site:
:
<div class="wg-block" data-reactid="10"
<div class="wg-header" data-reactid="11"/div>
....
<h4 class='condition'> "Text" </h4>
<div class="wg-footer" data-reactid="12"/div>
....
<div class="click"> </div>
I need to click on element in the second div, a condition which is on the first div.
How can I correct click on this element?
You should be able to do this with a CSS selector.
browser.click('.wg-footer .click');
That selector would select all elements with class "click" that are inside the element with class "wg-footer".
The link below is a great resource for selecting elements with CSS.
https://www.w3schools.com/cssref/css_selectors.asp
I want to find all div with specific class name. May be one div have nested div with parent div class name. suppose this example:
<div class="myForm">
<div class ="myDiv">
<div class ="myDiv">
</div>
</div>
<div class ="myDiv">
<div class ="myDiv">
</div>
</div>
</div>
In fact I want to find all div with "myDiv" class name and also recognize nested div. In the above example, there are 2 to 4 of them are nesting.
You can use >, direct children selector
$('.myForm > .myDiv')
or
$('.myDiv').parent('.mydiv')
or
$('.myForm').children('.myDiv')
Try this
var element = $(".myForm").find(".myDiv");
Try this:
For all myDiv's:
$('.myDiv')
For All nested myDiv's only:
$('.myDiv .myDiv')
For Only main 'myDiv's' excluding nested myDiv's:
$(".myDiv").not(".myDiv .myDiv")
Check Out this DEMO
I think an answer would also mention that having redundant class names for children is bad practice and should be avoided.
<div class="myForm">
<div class ="myDiv">
<div>
</div>
</div>
<div class ="myDiv">
<div>
</div>
</div>
</div>
Query children like, $('.myDiv, .myDiv > div') or make separate class names for nested divs.
you can use the > operator in element selector like
$('.myForm > .myDiv').child('.myDiv');
I have a div which I would like to hide along with all of its children. I thought that a simple selector.hide() would do the trick but it's still there.
HTML
<div class="row well">
<div class="artistAlbumInfo well col-md-6 ">
<h3><span id="artist"></span> - <span id="track"></span></h3>
<img src="" id="art" class="albumArt">
</div>
<div class="col-md-6">
<h3 id="album"></h3>
<h4>Playstate <p id="playState"></p></h4>
<h4>Position <p id="position"></p></h4>
</div>
</div>
JQuery
$(document).ready(function() {
$('.row .well').hide();
});
http://jsfiddle.net/375c8v2a/1/
Any ideas?
You don't need a space between classes if you want to hide only those with both classes
$('.row.well').hide();
To do either or add a comma
$('.row, .well').hide();
What you have didn't work because .row .well means "an element with class well inside (as a child or deeper descendant) an element with class row. In CSS, the space is the descendant combinator.
To seelct the element that has both classes, remove the space:
$(document).ready(function() {
$('.row.well').hide();
// ----^
});
That means "an element with class row and class well".
$('.row').hide();
please remove second class
From what I've read on the comments the .well class was intentionally created to specify which .row class will be hiding since you have a lot of row classes. Then you can use it as the trigger to hide that row, instead of doing: $('.row.well').hide(); you can just simply specify the targeted class by doing:
$('.well').hide();
Click here to see a example on jsFiddle
I have a bunch of child elements that are uniquely identified within a parent div. I want to know if there's a way in jQuery (or javascript) to capture all of them? The number of children in the parent div is arbitrary, meaning it could be any number for each div. For example:
<div class="parent1">
<span class="child1">some text here</span>
<span class="child2">some other text</span>
...
<span class="child49">yet more text</span>
<span class="something_else">other text i don't want to select</span>
</div>
<div class="parent2">
<span class="child1">some text</span>
<span class="child2">some text</span>
...
<span class="child120">some text</span>
</div>
So considering the above example, how do I get ALL the children (.child1 through .child49) within the class parent1?
I know that doing the following will work in jQuery (using multiple selector):
$(".child1, .child2, ..., .child49").css("background","red");
But is there a better way? I won't always know how many children are in each parent.
EDIT: also, I might have other children in the parent with a different class name that I DO NOT want to select; I specifically want to select all the "child*" classes.
$('.parent1 span[class^="child"]')
will select all the spans that start with the class child under the class .parent1.
If you want all the span.childX under all parentX then use:
$('div[class^="parent"] span[class^="child"]')
This is using a CSS3 attribute selector which jQuery have implemented (and extended in some cases). From the documentation:
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"
These codes gets all child in div.parent1 and div.parent2
$('[class^="parent"] span').css({ });
$('[class^="parent"]').children().css({ });
Thess codes gets onli the children for parent 1
$('.parent1 span').css...
$('.parent1').children().css...
use .children along with .filter, if number of children are not certain then label all childs which you want to manipulate of parent1 as child1
$(".parent1").children().filter(".child1").css({color:'Red'});
here is the fiddle http://jsfiddle.net/8hUqV/1/
jquery children