Set next div's height - javascript

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

Related

Get the last child of parent div

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

jQuery.next() returns empty object

I'm trying to get the next div after an image:
<a rel="nofollow" href="http://localhost:8046/file.htm" class="imgbox">
<img src="http://www.domain.tld/fm/912/image.png" class="" id="img-1303122" style="max-width:560px;" width="700" border="0" alt="title="/>
</a>
<div id="lic-img-1303122" class="licence-wrapper" style="display:none;">
<div class="licence-spacer"></div>
<div class="licence">© copyright<br /></div>
</div>
My jQuery code is the following:
console.log($("#img-1303122").nextAll(".licence-wrapper"));
Object { length: 0, prevObject: Object, context: HTMLDocument → JSUmstellung, selector: "#img-1303122.nextAll(.licence-wrapper)" }
So, why do I get no result? I already tried .next(), .closest() and .siblings() and none of them worked.
try :-
console.log($("#img-1303122").parent().nextAll(".licence-wrapper"));
Demo
Try this : you are trying to find next element directly to image, but actually div is present next to anchor tag. So get parent anchor tag with class="imgbox" and then .nextAll
console.log($("#img-1303122").closest('.imgbox').nextAll(".licence-wrapper").length);
#img-1303122 doesn't have other divs close by, probably you meant lic-img-1303122, next looks only for siblings, from the docs:
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
.nextAll() Gets all following siblings of each element in the set of matched elements, optionally filtered by a selector.
So you need to try this:
$("#img-1303122").parent().nextAll(".licence-wrapper")
Hey you can also get all div by this
alert($("#img-1303122").parent().parent().find(".licence-wrapper").length);
Demo

how to find and apply style to grand parent div?

Is there a way I can find the grand parent of a div and apply style to it?
<div class="wrapBoxes">
<div class="filters"></div>
<div class="wrapContainer"> <-- Need to apply style to this -->
<div class="leftNav"></div>
<div id="container">
<div class="box"></div> <-- From here -->
</div>
</div>
</div>
Something with this logic?
$(".box").find(grandParent).applyWhateverCss to GrandParent
use parent twice:
$(".box").parent().parent().css('color', 'blue');
parent docs:
Description: Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
You can use the closest as well.
$(".box").closest('.wrapContainer').css('color', 'blue');
closest docs:
Description: Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.
If you are sure it will always be the grand parent, use parent().parent() otherwise use closest
as a performance u can also use .closest(selector[,context]) i.e
$('.box').closest('.wrapContainer','.wrapBoxes').css('color','yellow');
In this way u can limit the DOM traversal to the context of div.wrapBoxes only
$(".box").parent().parent().css('color','red'); should do it.
Alternatively if the class of "wrapContainer" is always there:
$(".box").parents('.wrapContainer').css('color','red');

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