Let's say that I have some HTML like this:
<div>
<div class="required another_class">
<div class="some_class">
<input type="checkbox" name="some_check" value="" />
</div>
</div>
</div>
How do I find the parent div of the checkbox that has the class required? As you can see above, the div has two classes required and another_class. Therefore something like this:
$(':checkbox').closest('div[class=required]');
Will not work. I thought I could do something like:
$(':checkbox').closest('div').hasClass('required');
But that doesn't work either.
You can use CSS selector in .closest(), just like that :
$(':checkbox').closest('div.required');
Alternatively you can also use
$(':checkbox').parents('div.required')
Related
HTML code as follows:
<div id="input2" class="clonedInput">
<div class="col-sm-3 text_flied">
<div class="col-sm-4 no-padding">
<input type="" class="bwidth" value="" placeholder="300" name="fr_width[1]">
</div>
<div class="col-sm-1 text_middle no-padding">
<p>X</p>
</div>
<div class="col-sm-4 no-padding">
<input type="" class=" bheight" value="" placeholder="300" name="fr_height[1]">
</div>
</div>
</div>
I want to update the value of the input field fr_width[1]. This sections are dynamically created as fr_width[2], fr_width[3] and so on.
To update the value, I use the following code, but it is not working. I tried the children() option too.
$("#input2").siblings(".col-sm-4 input").val('123');
$("#input2").closest(".bwidth").val('123');
Both ways are not working.
Try DEMO :-
$("#input2").find(".text_flied").find(".bwidth").val('123');
OR
$("#input2").children(".text_flied").find(".bwidth").val('123');
OR
$("#input2").find(".bwidth").val('123');
OR
The shortest way you can go for
$("#input2 .bwidth").val('123');
1)- closest only works for ancestor or the selector itself .
2)- siblings only works for the same heirarchy nodes.
There are lots of ways you can find your required selector and set value to it .
Thanks !
You can simply use something like this. If you want to get specific item dynamically.
var itemIndex = 1;
$("input[name='fr_width["+itemIndex +"]']").val("123")
Please read the documentation on jQuery's siblings and closest.
Siblings is for getting the elements on the same DOM level as the selector, in this case #input2, and not its children
Closest is for getting the closest parent element of #input2, up in the DOM tree
What you want is simply:
$('#input2 input.bwidth').val('123')
to update the .bwidth input under #input2 only. If there are more, then $('input.bwidth').val('123') should update all inputs with the class name bwidth.
Here is a reference on how jQuery's selectors work.
Why so difficult? Just select all inputfields within div with id "input2". So you can choose the inputfield from the returned array.
Example:
$('#input2 input').eq(0).val("123");
i have something like this :
<li id="test">
<input type="text" name="firstname" />
</li>
<li id="test2">
<div id="special">
<input type="text" name="city" />
<input type="text" name="pc" />
</div>
</li>
When a user clicks on one input, I'd like to get all lis with an input child. For example, if a user clicks on .pc, I'd like to return both #test and #test2. I cannot use jQuery or any other external libraries.
for the second one (test2 in pc), you could use
$('#pc').closest('li');
to grab the closest parent of type li. (this would return just test2)
If you want both, however, you could give them a unique class (or something to help pick them out), and you could use
$('#pc').parents('li.myclass');
as an example
Edit: these are assuming also that you only want these two tests. If you want all of the li's, you could just use
$('#pc').parents('li');
Edit2: If it is not possible to use JQuery, there is a method someone wrote to handle this here
There is a reason jQuery is around...
You could start with looping over document.getElementsByTagName('li') then loop through the children, looking for an element with a tagName === 'INPUT' and then loop through the children's children etc.
Or go the other way checking parent from all inputs as in this answer -> How to check in Javascript if one element is contained within another
I am trying to create a label and placed outer the input check box, like
what I was trying this, My html is
<input type="checkbox">
My jquery is
$('input[type="checkbox"]').after('<label class="label-select"><span></span></label>');
Now the output is
<input type="checkbox">
<label class="label-select">
<span></span>
</label>
But I want like this
<label class="label-select">
<input type="checkbox">
<span></span>
</label>
So how may I write jquery for this. I dont like to change HTML.
Thanks for your answer.
Use wrap() not after():
$('input[type="checkbox"]').wrap('<label class="label-select"></label>').after('<span></span>');
Example fiddle
You're looking for .wrap() jQuery function.
If you use jQuery.wrap() you should be able to achieve what you're looking for.
$('input[type="checkbox"]').after('<span></span>').wrap('<label class="label-select"></label>');
EDIT
Got the two back to front sorry, should be
$('input[type="checkbox"]').wrap('<label class="label-select"></label>').after('<span></span>');
All you have to do is wrap the element (checkbox) inside the label.
$('input[type="checkbox"]').wrap('<label class="label-select"><span></span></label>');
Try this:
$('input[type="checkbox"]').wrap('<label class="label-select"></label>').wrap('<span></span>');
Or you can use jquery append() method to append html inside a block. Try this one,
$('.label-select').append('<input type="checkbox"><span></span>');
everybody!
I want to do following: When clicked on check box one or more div tags must change their css-style. I have this little javascript:
function changeStyle(o) {
if(o.checked) {
document.getElementById(o.getAttribute("value")).setAttribute('class','on');
}
else {
document.getElementById(o.getAttribute("value")).setAttribute('class','off')
}
}
and the html is:
<input type="checkbox" onclick="changeStyle(this);" value="div1" /> Div1<br />
<input type="checkbox" onclick="changeStyle(this);" value="div2" /> Div2<br />
<input type="checkbox" onclick="changeStyle(this);" value="div3" /> Div3<br />
<input type="checkbox" onclick="changeStyle(this);" value="div4" /> Div4<br />
<input type="checkbox" onclick="changeStyle(this);" value="div5" /> Div5<br />
<div id="div1" class="off">I'm in div 1</div><br />
<div id="div2" class="off">I'm in div 2</div><br />
<div id="div3" class="off">I'm in div 3</div><br />
<div id="div4" class="off">I'm in div 4</div><br />
<div id="div5" class="off">I'm in div 5</div><br />
<div id="div2" class="off">I'm in div 2</div><br />
But in this case when I have more than one div with the same id only the first div changes its style from .on to .off
How can I make so when I click on check box to change the css-style to all div tags with same id as the check box value?
Thank you in advance!
id must always be unique instead if id use class attribute that must work something like this
> <div class="div1 off">I'm in div 1</div><br />
Elements in the DOM shouldn't have the same id; they should always be unique. Consider giving the divs the same class, eg class="div1", etc. Then do getElementsByClassName on the checkbox value.
To change the css-style to all div tags. you must use classes not id's.
So change div id="div1" to div class="div1".
When you use an id, the browser will search for the ID, once it finds the FIRST id, it uses that AND STOPS searching, it doesnt not continue to look for more id's.
If you use classes, it will search the entire page for as many classes as it can find, then do whatever you want to EACH class..
So basically, change your id's to classes and everything should be fine.
Update
Here is a working JSFiddle:
Basically, first I changed the function name to lowercase (i dont know why, but "changeStyle" was not found in JSFiddle, but "changestyle" was.
BTW - Your ID's are fine, you dont need to replace them for classes. You function was just not being found.
I currently have some third party client-side "magic widgets" library that I have to deal with... :) All I have to do really is to add some small amount of behavior to those things with jQuery to accommodate for some simple business rules. A lot of times, I find myself selecting a bunch of elements in the same way. Since "magic widgets" are already super heavy on JS, and I even notice it on my fast machine, I was trying to keep my own JS to an absolute minimum. So, given that the user clicks on one of the following inputs, what is the most efficient way to select all the inputs, including the clicked one, in the following structure with jQuery?
<div>
<label><input ... /></label>
<label><input ... /></label>
<label><input ... /></label>
</div>
First of all, your inputs shouldn't be wrapped in labels, but that's a different argument.
The fastest way is probably:
$('input').click(function(){
var siblings = $(this).closest('div').find('input');
});
This will select your clicked input again too, though. If that's a problem, try:
$('input').click(function(){
var siblings = $(this).closest('div').find('input').not($(this));
});
If you were using correct markup so that the label tags preceded each input element, then your HTML would look like
<div>
<label for="input1" /><input id="input1" ... />
<label for="input2" /><input ... />
<label for="input3" /><input ... />
</div>
Then your jQuery code becomes way easier:
$('input').click(function(){
var siblings = $(this).siblings('input');
});
Well, assuming none of the elements in that markup have unique id's or class names, the most efficient selector you can use is a combination of tag names and the >, or first-child selector:
$("div > label > input");
$("div>label>input") I presume. Although you could give each input a common class and do $("input.class").
it depends. if the markup only consists of your fragment than:
$('input');
All modern broswers have a cache to tags.
If your looking for the inputs in within the div add an id to the div:
<div id="input_fields">
<label><input ... /></label>
<label><input ... /></label>
<label><input ... /></label>
</div>
and use this selector:
$('#iput_fields > label > input');
The id is important since it is the fastest possible query a browser can perform.
Seems like using class name better than using tag names without any parent. Here is the test for it for test your self.
Maybe more complex html structure give different results.