I have the following html
<div class="one">One<div>
<div class="two">two<div>
<div >three<div>
<div >four<div>
<div class="three">five<div>
How would I find the div elements which don't have a class attribute? ie three and four?
You can use :not selector
$('div:not([class])');
here is API
And a simple Fiddle
Use :not selector to filter
$('div:not([class])');
Combine the :not() selector with the attribute present selector [class].
$("div:not([class])")
jsFiddle.
Another option is to use .not() with Has Attribute Selector
$('div').not('[class]')
There are different ways to do it. You could use .children() to get the list and then index into that. Or you could look up the second element and use .next() to get its sibling.
Assuming you're not wanting to select all the dividers which have no classes, you can use nth-child to select specific ones if you know exactly where they are within a container. This will select your class-less dividers:
$('div:nth-child(3)') // Selects the third divider
$('div:nth-child(4)') // Selects the fourth divider
$('div:nth-child(3), div:nth-child(4)') // Selects both
JSFiddle example.
Alternatively you can select using .prev() and .next():
$('div.two').next() // Selects the divider after div class="two"
$('div.three').prev() // Selects the divider before div class="three"
Related
I need to check the following
if after $('.brandModelLineWrapper') there isn't a clearfix div, add it:
$('.brandModelLineWrapper').after("<div class='clear'></div>")
How could I do that?
You can use .next() with :is selector to check if it is div with class clear. and you can use .after() or insertAfter() to append the clear div based on first condition:
if(!$('.brandModelLineWrapper').next().is('div.clear')){
$('.brandModelLineWrapper').after("<div class='clear'></div>");
}
Use next() with a specific selector to check
if(!$('.brandModelLineWrapper').next('div.clear').length){
$('.brandModelLineWrapper').after("<div class='clear'></div>");
}
I have a Div which may contain an INPUT with a class of "datepicker"
<div class="rereg-input180">
... some layers
<input class="one two datepicker three">
....
I need to apply a Style="clear" to the top div. However I don't want to if that div doesn't contain a datepicker child.
How do I select it?
You could also do:
$('.datepicker').closest('.rereg-input180').addClass('clear');
You can do this -
$div = $('.rereg-input180');
if($div.find('.datepicker').length){
// apply style
}
You can use this selector:
$('div.rereg-input180:has(:text.datepicker)').css('clear', 'both')
You can use .has() http://api.jquery.com/has/ assuming you want the clear both, if it's a clear class, the you can just .addClass() instead of .css()
$('.rereg-input180').has('.datepicker').css('clear', 'both');
if you want to be more specific you can do
$('.rereg-input180').has('input.datepicker').css('clear', 'both');
You could use: jQuery's .parent()
$(".datepicker").parent().css("clear","both");
I need to select .foo, however, there are two a tags with .foo, and I need to select the one only with .foo, and not the one with .foo.bar, how do I accomplish this?
<a class="foo bar">text</a>
<a class="foo">text</a>
the code I'm using to find .foo is
$(this).parents('.post').find('.foo').text('text');
Some changes
Use .closest() instead of .parents() to fetch the nearest ancestor
use the :not() selector to filter out .bar elements
Try
$(this).closest('.post').find('.foo:not(.bar)').text('text');
Use jQuery .not(); http://api.jquery.com/not/
$(this).parents('.post').find('.foo').not('.bar').text('text');
Try
$(this).parents('.post').find('.foo').not('.bar').text('text');
You could just select with a class attribute:
.find('[class=foo]')
You want :not(selector):
$(this).parents('.post').find('.foo:not(.bar)').text('text');
See http://api.jquery.com/not-selector/
You need to use .not() method:
$(this).parents('.post').find('.foo').not('.bar').text('text');
You can read more here:
http://api.jquery.com/not-selector/
I have some div tag below:
<div class="magazine"></div>
<div class="newsletter"></div> // I need to take this div
<div class="may-moon"></div>
If I needed div with class start with "ma", I would use $('div[class^="ma"]'), but what is opposite? thanks.
The opposite would be to use jQuery :not():
$('div:not([class^="ma"])')
You can use the negative filtering function "not" like this: $('div').not('[class^="ma"]'), or the negative selector ":not" like this: $('div:not([class^="ma"])') (as pointed by Karl-André Gagnon)
You need to use :not() Selector for this. because there is no exact opposite selector exist of [^=] and * in jquery.
:not() Selector - Selects all elements that do not match the given selector.
See more about Jquery selectors
There a opposite selector exist ! -
Attribute Not Equal Selector [name!="value"] - Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.
but use of this ! selector, you need to provide full-name of class.
$('div[class!="magazine"][class!="may-moon"]')
Try This
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/