jQuery: select element from parsed html snippet

Question

Inside a class method I parse a html snippet like this:

    this.editCtrl = $('<input type="radio" name="society" value="existing"><select class="society"></select></input><input type="radio" name="society" value="existing"><input type="text"></input></input>');

I can add this snippet to my DOM and everything works fine, but before doing so I would like to fill the drop down. I tried to get it like this:

    var dropdown = this.editCtrl.find('select.society');

and like this:

    var dropdown = $('select.society', this.editCtrl);

The length of the result set is zero in both cases. What's the correct way to get a certain element from such an html snippet?

Answer 1

You can use filter in this case:

$('<input type="radio" name="society" value="existing"><select class="society"></select></input><input type="radio" name="society" value="existing"><input type="text"></input></input>').filter(function() {
    return $(this).is('select.society')
})

Reason being that if you were to use find you would need to from the parent element of your <select>, otherwise you are directly searching the elements and not from above them.