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");
Related
I'm using jQuery to remove CSS class from my elements:
$('.input-group-addon').child($('.glyphicon.glyphicon-calendar').removeClass());
Now on same action immediately I remove that class I want to add myClass for example so I tried:
$('.input-group-addon').child().addClass('myClass');
But this doesn't work, my element stays with class="" instead of class="myClass".
You don't need to use children() at all:
$('.input-group-addon > .glyphicon.glyphicon-calendar').removeClass();
Add class back to all direct ancestors:
$('.input-group-addon > *').addClass('myClass');
.child() is not a jQuery function replace it by .children() :
$('.input-group-addon').children().removeClass();
$('.input-group-addon').children().addClass('myClass');
Or without children() method :
$('.input-group-addon .glyphicon.glyphicon-calendar').removeClass();
$('.input-group-addon .glyphicon.glyphicon-calendar').addClass('myClass');
Hope this helps.
You need to specify the class you want to remove..
$('.input-group-addon').child($('.glyphicon.glyphicon-calendar').removeClass("className"));
Currently, this
$('.input-group-addon').child($('.glyphicon.glyphicon-calendar').removeClass());
removes everything.
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 the following code:
<div>
<label for="fsc_name1">Name:<span class="required"> *</span></label>
</div>
<div>
<input style="text-align:left; margin:0;" type="text" id="fsc_name1" name="fsc_name" value="" size="60">
</div>
It's a piece of a contact form and I need to be able to hide some of it's elements if a specific element is selected. So lets say I want to hide the two divs above. There's no id or class and I can't give them any. All I have is unique values "for="fsc_name1"" (<label>) and "id="fsc_name1"" (<input>)
Easy! Just use jQuery parent(). See docs: http://api.jquery.com/parent/
$('#fsc_name1').parent().hide()
$('label[for="fsc_name1"]').parent().hide()
You can also combine your selectors to save space. See docs: http://api.jquery.com/multiple-selector/
$('#fsc_name1, label[for="fsc_name1"]').parent().hide()
You can use a mix of atttribute selector, id selector and .parent() to solve this problem
$('label[for="fsc_name1"]').parent().hide()
$('#fsc_name1').parent().hide()
For a start, id="fsc_name1" is a class selector, you can do it via
$('#fsc_name1').parent().hide();
But, I think for your scenario, you're wanting something like this...
// This can be an array of elements
var selector = 'fsc_name1';
$('label[for=' + selector + ']').parent().hide();
$('#' + selector).parent().hide();
No jQuery version:
document.querySelector('[for=fsc_name1]').parentNode.style.display = 'none';
document.querySelector('#fsc_name1').parentNode.style.display = 'none';
Please have a look on http://jsfiddle.net/2dJAN/31/
$('#fsc_name1').closest('div').css('border','1px solid red')
$('#fsc_name1').closest('div').prev('div').css('border','1px solid green')
Note: Exactly I am not able to understand your question. So I add the border to the div's in example. If you want to hide, instead off .css you add .hide()that will hide the div.
Let me know if you have any questions.
Use the .parent() method.
$('#fsc_name1').parent().hide();
$('label[for="fsc_name1"]').parent().hide();
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"
Is it possible to remove the attribute of the first HTML <div> tag? So, this:
<div style="display: none; ">aaa</div>
becomes
<div>aaa</div>
from the following:
<div style="display: none; ">aaa</div>
(bbb)
<span style="display: none; ">ccc</span>
Or pure JavaScript:
document.getElementById('id?').removeAttribute('attribute?')
To remvove it from literally the first element use .removeAttr():
$(":first").removeAttr("style");
or in this case .show() will show the element by removing the display property:
$(":first").show();
Though you probably want to narrow it down to inside something else, for example:
$("#container :first").removeAttr("style");
If you want to show the first hidden one, use :hidden as your selector:
$(":hidden:first").show();
Yes, in fact jQuery has something for this purpose: http://api.jquery.com/removeAttr/
You can use the removeAttr method like this:
$('div[style]').removeAttr('style');
Since you have not specified any id or class for the div, the above code finds a div having inline style in it and then it removes that style from it.
If you know there is some parent element of the div with an id, you can use this code instead:
$('#parent_id div[style]').removeAttr('style');
Where parent_id is supposed to be the id of parent element containing the div under question.
You say "remove the attribute" — do you mean to remove all attributes? Or remove the style attribute specifically?
Let's start with the latter:
$('div').removeAttr('style');
The removeAttr function simply removes the attribute entirely.
it is easy in jQuery just use
$("div:first").removeAttr("style");
in javascript
use var divs = document.getElementsByTagName("div");
divs[0].removeAttribute("style");