DOM/Jquery get, input children

[bluewalrus]

I can't seem to figure out 2 parts of this


alert($($('#' + id_comment).children().get(3)).html())

Is the get(3) a DOM element, I can't find it in Jquery aside from the ajax functionality? I think 'get' is creating an array of the children of the ID specified.

I can am getting the 4th child of the div which is correct but I want to be able to alter the inputs of it. Does anyone have an idea about either of these?


4th child of the div:


<span>Email/username: <input id="name1_1" type="text"></span>
<span>Password: <input id="pwd1_1" type="password"></span>
<a href="javascript: login();" id="post_login_1_1" class="login_ajax">Login and Post your comment</a>


the full div:

<div class="comment_container" style="display:none;" id="reply_show1" class="reply">
<h2>Your commment:</h2>
<textarea id="response_1_1"></textarea>
<div class="identify_box visitor_box">
<span>Name: <input type="text" id="vis_name_1_1" /></span>
<span>Email: <input type="text" id="vis_email_1_1" />
<a href="javascript: login();" id="post_vis_1_1" class="login_ajax">Post your comment as a visitor</a></span>
</div>
<div class="identify_box user_box">
<span>Email/username: <input type="text" id="name1_1" /></span>
<span>Password: <input type="password" id="pwd1_1" /></span>
<a href="javascript: login();" id="post_login_1_1" class="login_ajax">Login and Post your comment</a>
</div>
</div>


My idea once I got the correct elements was I could just do something like


$($('#' + id_comment).children().get(3).children('input')).css('border', '#ff0000 solid 1px')

[jscheuer1]

First off, .get() is explained here:

http://api.jquery.com/get/

It does retrieve the DOM element at the specified 0 based index of the jQuery object, or undefined if none exists. And, if you want to turn the result back into a jQuery object, as you do here:



alert($($('#' + id_comment).children().get(3)).html())

You can use .eq() instead. It retrieves the jQuery object at the specified index:


alert($('#' + id_comment).children().eq(3).html())

See:

http://api.jquery.com/eq/

for more on .eq().

As to your wider question, sure - why not? I'm guessing you were you having a problem doing that. You cannot .children() of a .get():



$($('#' + id_comment).children().get(3).children('input')).css('border', '#ff0000 solid 1px')

And using .children() for the second part isn't really appropriate. It only finds the immediate children. The only .children() of the 4rth child of that div are two spans and an a tag. What you want for that part is .find(). It takes in all the descendant elements.

So, combining what I said about .get() and .eq() with the bit about .children() and .find(), you would have something like so:


$('#' + id_comment).children().eq(3).find('input').css('border', '#ff0000 solid 1px');

I prefer to use the .css() object notation because it makes it easier to add more property/value pairs later if need be:


$('#' + id_comment).children().eq(3).find('input').css({border: '1px solid #f00'});