Get the last child of parent div - javascript

How can I get the last child of parent div, every time I press enter a new div created, I want to get the last div of specific parent div.
<div id="parentdiv">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
</div>

$("#parentdiv :last-child");
You should use last child selector https://api.jquery.com/last-child-selector/

You can use jQuery last() method like following.
$('#parentdiv > div').last()
UPDATE: last div of parent div having a class myclass.
$('#parentdiv > div.myclass').last()

My suggestion is not to use jQuery here, as querySelector in javascript is sufficient to do your job.
var parentDiv = document.getElementById('parentdiv');
console.log(parentDiv.querySelector(':last-child'))

Related

remove children of particular parent from selection

Below is the structure of my html
<div class="parent">
//many other elements
<div class="child">
<div class="grandchild"></div>
</div>
</div>
I want to select all elements inside parent except elements inside child
I tried the below one which didnt work
$(".parent *:not(.child *)")
How can I select that?
Try this:
$('.parent *').filter(function(){
return $(this).parents('.child').length === 0;
});
This will select all elements inside .parent except those who are also children / sub-children of .child
$('.parent *:not(.child, .child *)')
Try this.
Although maybe you want this:
$(".parent > *:not(.child)")
Try this:
will select all the div that start with the class child under the parent class .parent.
$('.parent div[class^="child"]')
$('.parent *').not('.child *')
I want to select all elements inside parent except elements inside
child
you can use find method.
It will find all the descendants/children except children inside class child
$(".parent").find("*").not($(".child").children()).each(function(){
alert($(this).prop("class"));
});

Set next div's height

I am trying to set the height of next div using jQuery or Javascript. My HTML structure is as below:
<div class="swiper-slide class2" id="2" style="width: 1263px; height: 9942px;">
<div class="content-slide test2"></div>
</div>
I have tried below, but it is not working
$("#2").next().height(result11);
next() is used for siblings, whereas the element you appear to want to target is a child. As such you can use find():
$("#2").find('div').height(result11);
Or children():
$("#2").children().first().height(result11);
You can use the following code:
$("#2 > div").height(2740px)
It will selects all <div> elements where the parent is a <div id="2"> element.
required div element is child of targeted element. you need to use .find("div") instead of using .next()
$("#2").find('div').height(result11);
To set the height of immediate next child div we can use :first-child selector.
Hence,
$( "#2 div:first-child" ).height(result11);

jQuery and first element in the clicked element

i have 2 div elements, and if i click on the first div then should the other div which is inside of the clicked div displayed, but i can't understand who it works, my jquery code is so:
jQuery('.infobutton').click(function(){
var clickedID = jQuery(this).attr('id');
jQuery(clickedID).children('div').toggle();
});
<div class="infobutton" id="infobtn1">
<div class="content">some content</div>
</div>
I get everytime right id, i tried also with .first(), .parent(), .children('.content')
It's possible to do this with jQuery?
Let's presume you have HTML like this:
<div id="container" class="infobutton">
Some content
<div>Some other content</div>
</div>
Now let's walk through your Javascript:
jQuery('.infobutton').click(function(){
Find elements with the class infobutton and assign a click handler. This works fine.
var clickedID = jQuery(this).attr('id');
Put the id of that element in the variable clickedID. The value of clickedID is now container.
jQuery(clickedID).children('div').toggle();
Run the jQuery selector on clickedID. Here we have the problem. This can be boiled down to jQuery('container'). This looks for an element with the tag name container, not with the ID container.
In fact, the solution to all of this is not to use the ID at all. Instead, you can build the jQuery object with this, which is a reference to the clicked element:
jQuery('.infobutton').click(function(){
jQuery(this).children('div').toggle();
});
Inside the event handler this will refer the element to which the handler was attached to
jQuery('.infobutton').click(function(){
jQuery(this).children('.content').toggle();
});
Demo: Fiddle
Use this
jQuery('.infobutton').click(function(){
jQuery(this).children('.content').toggle();
});
this refers to the current element inside the event .
your code will work as
use jQuery('#'+clickedID) instead of jQuery(clickedID)

How to select an element by ID using jQuery

I am trying to use the following jQuery code to add a div with class col_box inside the col_left div:
$('#col_left').add('div').addClass('col_box');
My DOM tree looks like this:
<div id="header">Header</div>
<div class="col_container">
<div id="col_left">
<div class="col_box">A</div>
<div class="col_box">B</div>
</div>
</div>
However the jQuery code isn't working. It adds the class col_box to every element on the page.
$('#col_left').add('div') is adding all <div> elements to the original selection. Try using $('#col_left').append('<div class="col_box"></div>') instead (or .prepend).
$('#col_left').add('div') means the same as $('#col_left, div'). i.e. "The element with the id 'col_left' and all div elements.
If you want to select the divs that are children of col_left, just use a child combinator.
$('#col_left > div').addClass('col_box')
.add() adds a selector to the selection, it doesn't create or add elements.
$('#col_left') means *select element id col_left*
.add('div') means add all divs of the page the the selection
So at this point you've selected #col_left and all the divs.
.addClass('col_box') means *add the class col_box to all elements of the selection*.
Here is how to create a div and add it to #col_left:
$('<div></div>').addClass('col_box').appendTo('#col_left');
Or:
$('<div class="col_box"></div>').appendTo('#col_left');
you can use
.append appends after the matched target
$('#col_left').append(
$("<div/>",{class:'col_box'}).html("div added")
);
here is the fiddle http://jsfiddle.net/R65cn/4/

Jquery find all except

I have following HTML:
<div id="123" class="test">
<div class="testMessage">Foo</div>
<div><div class="testDate">2010</div></div>
<div id="127" class="test">
<div class="testMessage">Bar</div>
<div><div class="testDate">2011</div></div>
</div>
</div>
And I have following JS/jQuery code:
$(".test").find(".testDate").val("cool 2010");
How to change JS/jQuery to find "testDate" class element except in children "test" class block without using children?
P.S. I know only about class name and I don't know how many divs can be nested.
Update
Its probably the weirdest selector I've ever written:
$("div.test").not(':has(> .test)').siblings().find('.testDate').text('cool 2010');
Demo: http://jsfiddle.net/mrchief/6cbdu/3/
Explanation:
$("div.test") // finds both the test divs
.not(':has(> .test)') // finds the inner test div
.siblings() // get all other divs except the inner test div
Try this and also div elements do not have a value property, use html() method to set the inner html or text()
$("div.test :not(.test)").find(".testDate").html("cool 2010");
If you can modify your main div id to "_123", you can straight away use the id selector like this
$("#_123 > div.testDate").html("cool 2010");
I think the not() selector might help. You can learn more about it here: http://jsperf.com/jquery-css3-not-vs-not
Anytime you try to select $('.test'), it will grab all elements with a class='test'. You need to start at the outermost body tag:
$('body').children('.test').children(':not(.test)').find('.testDate').text('cool 2010');

Categories

Resources