<div class="parent">
<div class="child-class">
<div>
<div class="child-class">
<div>
<div class="child-class">
<div>
</div>
I need to add a class to second child-class using jQuery
Adress the second child of the parent via CSS Selector:
$('.parent > .child-class:nth-of-type(2)').addClass('your-class');
Advantage over using nth-of-type instead of nth-child is beeing more precise in selecting what you want. The nth-child will select any child of your parent. nth-of-type will only select children with a certain type (in this case class child-class).
You can use :nth-child selector at this context,
var elem = $(".parent > .child-class:nth-child(2)");
Note that, the index that is being passed into the selector would start from 1 not from 0.
Here you go with a solution
$('.parent > .child-class:eq(1)').addClass('newClass');
.child-class {
width: 100px;
height: 50px;
border: 1px solid;
}
.newClass {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child-class"></div>
<div class="child-class"></div>
<div class="child-class"></div>
</div>
I've used jQuery eq selector.
Documentation: https://api.jquery.com/eq-selector/
Hope this will help you.
Related
I would like to get the last child in of a parent div.
Actually, I'm using this:
var els = '#first,#second,#third';
$(els).each(function () {
$(this).children().last().addClass('memo');
});
It works great for divs with only 1 child, but when the last div is inside a div inside another div, it doesn't work.
var els = '#first,#second,#third';
$(els).each(function() {
$(this).children().last().addClass('memo');
});
.memo {
background-color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">First text
<div>a</div>
</div>
<div id="second">Second text
<img>b
</div>
<div id="third">Third text
<div>Nested 1
<div>Nested 2
<img>c
</div>
</div>
</div>
How can I refer to the latest child?
Children are different from grandchildren/descendants. $.children only looks at immediate children.
For the behavior you want, you could find all descendants using * and use last() in this scenario, if you are looking for the last descendant in each of #first,#second,#third
It's also important to mention that this gets the last element child, not the last text node. jQuery is not able to deal with text nodes directly. Credits to #T.J. Crowder. See How do I select text nodes with jQuery?
$('#first,#second,#third').each(function () {
$(this).find('*').last().addClass('memo');
});
img.memo {
border: 3px solid red;
padding: 5 px;
}
div.memo {
border: 3px solid blue;
padding: 5 px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">
<div>a</div>
</div>
<div id="second">
<img>b
</div>
<div id="third">
<div>
<div>
<img>c
</div>
</div>
</div>
You need remove the .last()
$(els).each(function() {
$(this).children().addClass('memo');
});
This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 1 year ago.
I tried this solution but am missing something: change background of parent div on hover
Here is my html:
<div class="box">
<h3 class="page-header item-title">
<a class="titlelink" href="/index.php?option=com_content&view=category&id=11&Itemid=234">
Modeling</a>
This is what I tried to use in an override here: /templates/shaper_helixultimate/html/com_content/category/default_children.php
$document = JFactory::getDocument();
$document->addScriptDeclaration('
$('.box > .titlelink').hover(function(){
$(this).parent().toggleClass('hover');
})
});
');
http://jsfiddle.net/t5hf8qdc/
What am I doing wrong?
$('.box > .titlelink').hover(function() {
$(this).parent().toggleClass('hover');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<h3 class="page-header item-title">
<a class="titlelink" href="/index.php?option=com_content&view=category&id=11&Itemid=234">
Modeling</a>
</h3>
</div>
The selector .box > .titlelink looks for a parent-child relationship. You don't have that.
Use .box .titlelink instead.
$('.box .titlelink').hover(function() {
$(this).parent().toggleClass('hover');
});
.hover {
background: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<h3 class="page-header item-title">
<a class="titlelink" href="/index.php?option=com_content&view=category&id=11&Itemid=234">
Modeling</a>
</h3>
</div>
As #isherwood mentioned, the solution you linked to uses a different structure than what you have. The > in CSS selectors specifies that you're targeting a direct child, while just leaving a space between the two selectors looks for any descendant.
.box > .titlelink {
/* targets where .titlelink is a child of .box */
}
.box .titlelink {
/* targets where .titlelink is a descendant of .box */
}
If you want to use a strict CSS selector like the solution you referenced, you could do:
$('.box > .item-title > .titlelink').hover(function(){
$(this).parent().toggleClass('hover');
});
Although this will add the hover class to the .item-title element, not to the .box element. Assuming that you specifically want target the .box ancestor of whatever you're listening for the hover event on, then you want:
$('.box > .item-title > .titlelink').hover(function(){
$(this).parents('.box').toggleClass('hover');
});
since jQuery's parents method allows you to pass a selector to target a specific ancestor, travelling multiple levels up through the tree.
I want to dynamically change the class of the element #sidePanel from .compact to .expanded, in this code:
<div id="sidePanel" class="compact"></div>
<div id="topbar">
<div id="buttonContainer">
<div id="button"></div>
</div>
</div>
I'm stuck here, I can't apply the class to the correct <div>, I can just add the class to the topbar:
$(document).ready(function(){
$("#button").mouseover(function(){
$("this").parent().eq(2).addClass(".expanded").removeClass(".compact");
});
});
I also tried this:
$(document).ready(function(){
$("#button").mouseover(function(){
$("#sidepanel").addClass(".expanded").removeClass(".compact");
});
});
Your second example was pretty close. When you $.addClass() and $.removeClass(), or are referring to classnames outside of using a selector to target something, just reference the class name (no need for the leading .). Also JS (and CSS) are case-sensitive, so $('#sidepanel') won't target #sidePanel - the cases need to match.
$("#button").mouseover(function() {
$("#sidePanel").addClass("expanded").removeClass("compact");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
<div id="buttonContainer">
<div id="button">button</div>
</div>
</div>
In your first example, $(this) is how you reference this in jQuery. If you put this in quotes, the word this is treated as a string literal instead. And since to use $.parent() you would need to go up 2 levels, you should use $.parents() with the ID of the parent you want to target, then use $.prev() to select the previous element, which is #sidePanel. So to traverse the DOM like that, this is how I would do it.
$("#button").mouseover(function() {
$(this).parents('#topbar').prev().removeClass('compact').addClass('expanded');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
<div id="buttonContainer">
<div id="button">button</div>
</div>
</div>
Your problem is you used $("#sidepanel") instead of $("#sidePanel")
Here's a working example after the change is made:
$(document).ready(function(){
$("#button").on('mouseover', function(){
$("#sidePanel").addClass("expanded").removeClass("compact");
});
});
#topbar > div {
width: 100px;
height: 30px;
background: #ccc;
margin-top: 20px;
}
#sidePanel {
width: 100%;
height: 40px;
background: #ccc;
}
#sidePanel.expanded {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidePanel" class="compact"></div>
<div id="topbar">
<div id="buttonContainer"></div>
<div id="button"></div>
</div>
first: the solution
$(document).ready(function()
{
$("#button").mouseover(function()
{
// class names - without the dot
$("#sidepanel").addClass("expanded").removeClass("compact");
});
});
then: why you were really close on your first attempt
$(document).ready(function()
{
$("#button").mouseover(function()
{
// $(this) selector uses the `this` keyword (not as a string)
$(this).parent().eq(2).addClass(".expanded").removeClass(".compact");
});
});
I have a scenario where I've multiple div with class navToME on/off. Now what I've trying to do here is if a div has a class off, then remove the class navToMe.
E.g.,
if($('.navToME').hasClass('off')){
$('.off').removeClass('navToME');
}
My HTML structure is like this:
<div class="on navToME">
<strong>ABC</strong>
</div>
<div class="off navToME">
<strong>DEF</strong>
</div>
What's happening right now is it just checks the first div with that class and returns false. Is there a way anyone can suggest so that I could just this for all classes inside my HTML? Thanks in advance!
You can simply use Class Selector to identify element with multiple class then use removeClass()
$('.off.navToME').removeClass('navToME');
$(function() {
$('.off.navToME').removeClass('navToME');
});
.on {
background-color: green;
}
.off {
background-color: red;
}
.navToME {
background-color: grey!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="on navToME">
<strong>ABC</strong>
</div>
<div class="off navToME">
<strong>DEF</strong>
</div>
I am looking for way to change 'GetElementById' div inside the div, which I am targeting.
Here's the example:
Let's say I have this
<div onclick="runscript()">
<div id="insider">
</div>
</div>
<div onclick="runscript()">
<div id="insider">
</div>
</div>
<script>
function runscript(){
document.getElementById('insider').style.color='red';
}
</script>
If I would like to change exactly the same div, which I am clicking on, I could use this.style.color='red', but I need to change "insider" div inside exactly 'this' div I'm clicking on.
I am looking only for javascript solution, no jquery.
<div onclick="runscript(this)">
<div class="insider">
Sample text
</div>
</div>
Give the insider div a class name called insider and do this:
function runscript(object){
object.querySelector("div[class='insider']").style.color='red';
}
This works by passing the parent div to the runscript function with the keyword this. Then querySelector will try to find the element based upon the selector div[class='insider']. If found it will set the color of the text to red.
<div onclick="runscript(this)">
<div class="insider">
</div>
</div>
<div onclick="runscript(this)">
<div class="insider">
</div>
</div>
<script>
function runscript(object){
object.querySelector('.insider').style.color='red';
}
</script>
like in the comments above
id is an unique identifier - so it is not valid to have an id twice in your DOM
I recommend you to use addEventListener instead of the onclick attribute
I made a fiddle in pure javascript: http://jsfiddle.net/53bnhscm/8/
HTML:
<div onclick="runscript(this);">
<div class="insider"></div>
</div>
<div onclick="runscript(this);">
<div class="insider"></div>
</div>
CSS:
div {
border: 1px solid black;
height: 100px;
}
.insider {
border: 3px solid green;
height: 20px;
}
Javascript:
function runscript(x) {
x.firstElementChild.style.border = '1px solid red';
}