How to get last child in a div parent? - javascript

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

Related

jquery remove div inside of other divs

I have a main <div> with many other divs inside like this:
[HTML]
<div class="container">
<div class="row">
<div class="col">
<div class ="deleteMe">
delete me
</div>
</div>
</div>
</div>
I want to remove the div with class name "deleteMe", i tried to remove it by using ,find() method from jquery:
$('.container').find('.row').find('.col').find('deleteMe').remove();
or
$('.container').find('.row').find('.col').removeClass('.deleteMe');
But didn't work, what is the best way to remove it?
here is the fiddle link test this exemple:
fiddle
//$('.container').find('.row').find('.col').find('deleteMe').remove();
$('.container').find('.row').find('.col').removeClass('.deleteMe');
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.deleteMe {
border: solid 1px #6c757d;
padding: 10px;
background: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<div class="deleteMe">
delete me
</div>
</div>
</div>
</div>
You do not need jquery for the job, see the following code snippet ( The setTimeout wrapper delays the deletion by 1s and only serves to see what is happening.
setTimeout ( () => {
document.querySelector(".deleteMe").remove();
}, 1000);
<div class="container">
<div class="row">
<div class="col">
<div class ="deleteMe">
delete me
</div>
</div>
</div>
</div>
Given your original code, you might want the selector to be more specific:
document.querySelector(".container > .row > .col > .deleteMe").remove(); // Adjacent sub-selectors reference elements in a parent/child relation
document.querySelector(".container .row .col .deleteMe").remove(); // The elements are in a ancestor/descendant relation, not necessarily child/parent
Try this
$(".container .deleteMe").remove();
below line will do
$( ".container .row .col .deleteMe" ).remove();
There is a little typo in your code: a . is missing before deleteMe.
$('.container').find('.row').find('.col').find('.deleteMe').remove();
correctly.
Another thing: removeClass don't remove an element with the specified class; It removes the specified class from the element.

how to add a class to parent child of a div

<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.

How to change styling of a specific div onhover of another element when divs share an id

I have multiple rows with 3 divs per row. Each div consists of two rows; in the first row a picture is displayed, in the second row a description is shown. HTML is like this:
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
Some CSS:
#block1, #block2, #block3
{
width: 25%;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: #FFFFFF;
border: 1px solid #154494;
}
#block1-bottom, #block2-bottom, #block3-bottom
{
color:#FFFFFF;
}
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div. So for example when hovering over block1, I want the text color of block1-bottom to change into #FEB90D. I found a script which does this for me:
$(function() {
$('#block1').hover(function() {
$('#block1-bottom').css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$('#block1-bottom').css('color', '#FFFFFF');
});
});
However, this only works for the first block of the first row. I think this is because the id's of the 1st, 2nd and 3rd blocks have the same name and the script cannot figure out on which block to apply the script.
Does anyone have any thoughts on how to fix this, without changing all the divs id's? I have 11 rows in total so using separate names for each div is not really an option in my opinion. So basically, the scripts needs to change the color of the second child of the hovered div.
You shouldn't be using id for more than one element. Change those ids for classes and it will work.
It's better to do this with CSS
.block1 > .block1-bottom {
color: #FFFFFF;
}
.block1:hover > .block1-bottom {
color: #FEB90D;
}
<div class='block1'>
<p class='block1-top'>This is paragraph 1</p>
<p class='block1-bottom'>This is paragraph 2</p>
</div>
IDs should be unique anyways. If you do it in jQuery, it should look like this.
$(function() {
$('.block1').on("mouseover", function() {
$('.block1-bottom').css('color', '#FEB90D');
}).on("mouseout", function() {
$('.block1-bottom').css('color', '#FFFFFF');
});
});
Ids should be unique. So add necessary classes and use class selector. So code is similar to below
$('.row .box').hover(function() {
$(this).find(".boxbottom").css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$(this).find(".boxbottom").css('color', '#FFFFFF');
});
Here is the demo https://jsfiddle.net/afnhjdjy/
After you clean up your duplicate IDs problem, you can do this without javascript at all:
<div class="row">
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
</div>
CSS:
.block:hover .block-bottom {color: #FEB90D}
According to this situation:
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div
You may simply use:
.block:hover .block-bottom{
color: #FEB90D;
}

How do I show all of inner DIVs using nested JQuery selector?

This my code, the first selector is for when i click on a div that has an id of # and the inner selector is an inner div that has the id of "popup-#" my question is how do I show just the current inner div because currently when I click, all of the inner divs on the page are showing and hiding. Side note these divs are generated through php and so they have values starting at 1 and increasing. Also another questions, what is a better way to write the inner div selector to show instead of using .filter for show and hide ? I couldn't find a way to use "this" for the inner selector.
ex. When I click on one of my outer divs that has an ID of "1" the inner div of "popup-1" should show and not all the others.
$('div').filter(function(){
return this.id.match(/^\d+$/);
}).click(function() {
if($('div').filter(function () {
return this.id.match(/popup-\d+$/);
}).css('display') == 'none'
) {
$('div').filter(function () {
return this.id.match(/popup-\d+$/);
}).show();
} else {
$('div').filter(function () {
return this.id.match(/popup-\d+$/);
}).hide();
};
});
HTML
<div class="test-style" id="1">
<div class="inner-test" id="popup-1" style="display: none">
</div>
</div>
<div class="test-style" id="2">
<div class="inner-test" id="popup-2" style="display: none">
</div>
</div>
Use the class instead of filtering on the ID. Then you need to get the ID of the element you clicked on, and concatenate that with the popup- prefix to get the ID of the element you want to show.
$(".test-style").click(function() {
var id = this.id;
$(".inner-test").hide();
$("#popup-" + id).show();
});
.test-style {
height: 100px;
width: 100px;
background-color: red;
border: solid 1px black;
}
.inner-test {
height: 50px;
width: 50px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-style" id="1">
<div class="inner-test" id="popup-1" style="display: none">
</div>
</div>
<div class="test-style" id="2">
<div class="inner-test" id="popup-2" style="display: none">
</div>
</div>
But since the DIV you want to show is always inside the DIV you click on, you don't even need the IDs. Just do:
$(".test-style").click(function() {
$(".inner-test").hide();
$(this).find(".inner-test").show();
});
Your filter
this.id.match(/popup-\d+$/)
matches all inner elements in the document, because of the general 'div' selector.
Instead of
if($('div').filter(function () {
try
if($(this).filter(function () {
to filter on children of clicked element only.

Something like this.getelementbyid(id of element inside this 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';
}

Categories