.js HELP with parents() / closest()

[Freid001]

Hi, I have this html code:

 

 <div class="names dropdown">
    <input type="text" class="text_form">
    <ul class="dropdown-menu"></ul>
</div>

Some js adds the following after an ajax call: <li id='selected'><a href='#'>Option</a></li> in between the <ul></ul> tags.

 

I then have this js that listens for id='selected' and when clicked I want it to set the value of input to the value select $(this) however it does not do this. It just says undefined. Im not sure why PLEASE HELP!  

$( document ).on( "click", "#selected", function() {

   console.log( $(this).parents() );
   
   $(this).closest('input').val( $this.text() );

 });

Thanks

[requinix]

You didn't define $this.

[Freid001]

How do I do that?

[Freid001]

oh I see

[Freid001]

Thats a typo sorry. yeah it still does not work

[Freid001]

It is this: 

$( document ).on( "click", "#selected", function() {

console.log( $(this).parents() );

$(this).closest('input').val( $(this).text() );

});

[Freid001]

It just returns this: 

[prevObject: jQuery.fn.jQuery.init[1], context: li#selected, jquery: "1.9.1", constructor: function, init: function…]context: li#selectedlength: 0prevObject: jQuery.fn.jQuery.init[1]__proto__: Object[0] 

[Freid001]

I've tried $(this).closest('div') too and still it says undefined. Im not sure if its something wrong with the DOM in the HTML? What do you think?

[requinix]

What is saying that what is undefined? In your original code $this was the only thing that was actually undefined. Speaking of, what's your current code? I lost track of your changes.

[Alex_]

The .closest() function only looks for parents, not "any nearest" element in the DOM, so to speak. One alternative is to do something like this since the container seems pretty static..

 

 

$(document).on('click', '#select', function() {
var mainContainer = $(this).parents()[1]; //<div class="names dropdown"> -- Index 1, since static.
 
var inputField = $(mainContainer).find('input')[0]; //Index 0, because it's right below the <div> tag.
 
console.log(inputField);
});

 

Obviously it isn't great practise tho, if you had more dynamic content or happened to add/change a field you'd have to change the indexes as well. But assuming that's a pretty static layout (aside from the dynamic <li> tags), it should work just fine.