<div id="main">
<div class="1"></div>
<div class="2"></div>
<div class="2"></div>
<div class="3"></div>
<div class="3"></div>
<div class="4"></div>
</div>
How we can write a selector using :last-child in jquery to find out the last div with class 3 ?
Try this selector... though your classes shouldn't be just numbers. They should start with a normal character.
$("#main .3:last")
FYI, :last-child checks if the target is last child of its parent. None of the elements with class .3 are the last child of their parent.
Use .last():
$("#main .3").last();
http://api.jquery.com/last/
http://jsfiddle.net/E64Wm/1/
$('#main > .3').last() should point to the right element
Try this:
$('#main').find(':last-child');
Related
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 root div element and inside that div i have an image.
<div id="root">
<img id="msg"/>
</div>
Now using jquery i used to prepend n number of div elements inside that root div. The issue is that the new div elements come before the img tag. . like
<div id="root">
<div id="b"></div>
<div id="a"></div>
<img id="msg"/>
</div>
But I need it to prepended div elements to appear after the img tag like
<div id="root">
<img id="msg"/>
<div id="b"></div>
<div id="a"></div>
</div>
Any suggestions as to how I can achieve this using jQuery?
Try:
$("your html").insertAfter($("#msg"));
Like this maybe:
$("#msg").after();
Simply use the append method instead of prepend like this:
$('#root').append('<div>Div N</div>')
Here is the working example in JSFiddle.
And here is the documentation on jQuery's append method.
Use append() instead of prepend():
append() method add div after first div
prepend() method add div before first div.
Try
var newDiv = $("<div>test</div>");
$('img').after(newDiv);
How can I select all following elements from my selector, stopping when the next element is not part of it and ignoring the further elements?
example:
<div class="primary"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="primary"></div>
<div class="sub"></div>
<div class="primary"></div>
<div class="sub"></div>
<div class="sub"></div>
now in js / jquery:
$('.primary').click(function()
{
$(this).... //acces to all following elements with class "sub"
});
so when clicking on the first primary div, I can affect the 3 following "sub" divs
I know I could do some kind of .next() in a while, but this seams inefficient.
Use .nextUntil()
$('.primary').click(function(){
$(this).nextUntil('.primary').text($(this).text())
});
Demo: Fiddle
This will Helpful to you
**SEE DEMO http://jsfiddle.net/dhaval17/W3Jsy/**
HTML:
<div style="display:block">Text</div>
<div style="display:block">Text</div>
<div style="display:none">Text</div>
<div style="display:none">Text</div>
<div style="display:none">Text</div>
How do I find first invisible block and make it visible?
If there is no invisible block, do nothing.
$('div:hidden:first').show();
div the element-selector[docs]
:hidden the hidden-selector[docs]
:first the first-selector[docs]
Use this:
$('div:hidden:first').show();
jQuery has the :visible and :hidden selectors:
$('#wrapperContainer > div:hidden:first').show();
(Recommend a wrapper container because if you just do 'div:hidden:first' it will get the first hidden div on the page, which probably isn't what you want)