Getting elements children with certain tag jQuery
Solution 1
I hope this answers your questions.
<script type="text/javascript">
$(document).ready(function() {
// Question part 1
var formInputs = $("form#formId :input");
formInputs.each(function(index) {
alert(index + ': ' + $(this).attr("id") + "=" + $(this).val());
});
// Question part 2
var a = $("<a id='linkId' href='#'>Link Text</a>");
a.click(function(){alert("hello")});
$('#where').before(a);
});
</script>
<form action="#" id="formId">
<input id="name" type="text" value="foo" />
<input id="surname" type="text" value="bar" />
<div>
<input id="phone" type="text" value="911"/>
</div>
</form>
</div>
<div id="where"></div>
Solution 2
If you want all descendants then @woland's answer works. If you really only want the direct children as indicated by your > then
$('#form').children('input')
Wolands matches name, surname and phone. Mine matches just name and surname
<form action='#' id='formId'>
<input id='name' />
<input id='surname'/>
<div>
<input id='phone'/>
</div>
</form>
Solution 3
Here's how it works:
$('#formId input')
Solution 4
If you want to loop through all of the inputs, take a look at the each()
function in jQuery:
johnnyArt
“The Web is like a dominatrix. Everywhere I turn, I see little buttons ordering me to Submit.” (Nytwind)
Updated on June 04, 2022Comments
-
johnnyArt about 2 years
I'm trying to get all the input elements from a certain form from jQuery by providing only the name of the form and only knowing that those wanted fields are input elements.
Let's say:
<form action='#' id='formId'> <input id='name' /> <input id='surname'/> </form>
How do I access them individually with jQuery? I tried something like
$('#formId > input')
with no success, in fact an error came back on the console"XML filter is applied to non-XML value (function (a, b) {return new (c.fn.init)(a, b);})"
Maybe I have to do it with .children or something like that? I'm pretty new at jQuery and I'm not really liking the Docs. It was much friendlier in Mootools, or maybe I just need to get used to it.
Oh and last but not least, I've seen it asked before but no final answer, can I create a new dom element with jQuery and work with it before inserting it (if I ever do) into de code? In mootools, we had something like
var myEl = new Element(element[, properties]);
and you could then refer to it in further expressions, but I fail to understand how to do that on jQueryWhat I ended up doing was something like this:
$('#where').before("<a id='linkId' href='#'>Link Text</a>")
but this defeats the requirement of working with it before inserting it if you know what I mean.Thanks in advance.
-
johnnyArt over 14 years+1 for teaching me about the each function which even though I had read it, I also forgot about it.
-
St.Woland over 14 yearsWhat's the difference then?
#formId > input
should do the job. +1 anyway, good answer. -
Matt Dotson over 14 yearsIn css selectors, the difference between "#formId > input" and "#formId input" is that the ">" only matches elements which are directly below the #formId in the dom. "#formId input" matches any descendant. The input could be nested in 15 divs and it would still match.