Having trouble selectin an element within $(this), even thouhg I can see it in the $(this) outerHTML

Question

I’m using jQuery 1.12. I’m trying to select an element within $(this), using

 $(".select").bind('keydown', function(event) {
    elt = $(this)[0];
    console.log(elt.outerHTML);
    elt = $(this)[0].search("li")
    console.log(elt.length);
    switch(event.keyCode){
    // case up
    case 38:

        break;
    case 40:
        break;
    }
 });

Even though the first list prints out

    <div class="select" tabindex="1" style="width: 235px;"><select class="selectField selectMenu form-control select-hidden" name="user[address_attributes][state_id]" id="user_address_attributes_state_id" style="">
  <option value="">Select State</option>
  <option value="3526">Alabama</option>
  <option value="3556">Alaska</option>
  <option value="3547">Arizona</option>
  <option value="3510">Arkansas</option>
  <option value="3542">California</option>
  <option value="3543">Colorado</option>
  <option value="3527">Connecticut</option>
  <option value="3512">Delaware</option>
  <option value="3513">Florida</option>
  <option value="3514">Georgia</option>
  <option value="3555">Hawaii</option>
  <option value="3548">Idaho</option>
  <option value="3529">Illinois</option>
  <option value="3530">Indiana</option>
  <option value="3528">Iowa</option>
  <option value="3515">Kansas</option>
  <option value="3557">Kentucky</option>
  <option value="3516">Louisiana</option>
  <option value="3531">Maine</option>
  <option value="3517">Maryland</option>
  <option value="3558">Massachusetts</option>
  <option value="3532">Michigan</option>
  <option value="3533">Minnesota</option>
  <option value="3519">Mississippi</option>
  <option value="3518">Missouri</option>
  <option value="3549">Montana</option>
  <option value="3534">Nebraska</option>
  <option value="3545">Nevada</option>
  <option value="3535">New Hampshire</option>
  <option value="3536">New Jersey</option>
  <option value="3544">New Mexico</option>
  <option value="3537">New York</option>
  <option value="3520">North Carolina</option>
  <option value="3550">North Dakota</option>
  <option value="3538">Ohio</option>
  <option value="3521">Oklahoma</option>
  <option value="3551">Oregon</option>
  <option value="3559">Pennsylvania</option>
  <option value="3539">Rhode Island</option>
  <option value="3522">South Carolina</option>
  <option value="3552">South Dakota</option>
  <option value="3523">Tennessee</option>
  <option value="3524">Texas</option>
  <option value="3546">Utah</option>
  <option value="3540">Vermont</option>
  <option value="3560">Virginia</option>
  <option value="3553">Washington</option>
  <option value="3511">Washington, D.C.</option>
  <option value="3525">West Virginia</option>
  <option value="3541">Wisconsin</option>
  <option value="3554">Wyoming</option>
</select><div class="select-styled active">Select State</div><ul class="select-options" style="display: block;"><li rel="">Select State</li><li rel="3526">Alabama</li><li rel="3556">Alaska</li><li rel="3547">Arizona</li><li rel="3510">Arkansas</li><li rel="3542">California</li><li rel="3543">Colorado</li><li rel="3527">Connecticut</li><li rel="3512">Delaware</li><li rel="3513">Florida</li><li rel="3514">Georgia</li><li rel="3555">Hawaii</li><li rel="3548">Idaho</li><li rel="3529">Illinois</li><li rel="3530">Indiana</li><li rel="3528">Iowa</li><li rel="3515">Kansas</li><li rel="3557">Kentucky</li><li rel="3516">Louisiana</li><li rel="3531">Maine</li><li rel="3517">Maryland</li><li rel="3558">Massachusetts</li><li rel="3532">Michigan</li><li rel="3533">Minnesota</li><li rel="3519">Mississippi</li><li rel="3518">Missouri</li><li rel="3549">Montana</li><li rel="3534">Nebraska</li><li rel="3545">Nevada</li><li rel="3535">New Hampshire</li><li rel="3536">New Jersey</li><li rel="3544">New Mexico</li><li rel="3537">New York</li><li rel="3520">North Carolina</li><li rel="3550">North Dakota</li><li rel="3538">Ohio</li><li rel="3521">Oklahoma</li><li rel="3551">Oregon</li><li rel="3559">Pennsylvania</li><li rel="3539">Rhode Island</li><li rel="3522">South Carolina</li><li rel="3552">South Dakota</li><li rel="3523">Tennessee</li><li rel="3524">Texas</li><li rel="3546">Utah</li><li rel="3540">Vermont</li><li rel="3560">Virginia</li><li rel="3553">Washington</li><li rel="3511">Washington, D.C.</li><li rel="3525">West Virginia</li><li rel="3541">Wisconsin</li><li rel="3554">Wyoming</li></ul></div>

in which you can see “li” elements, the next line

elt = $(this)[0].search("li")

returns

TypeError: $(...)[0].search is not a function

How do I select the first “li” element within $(this)? Here is the Fiddle that illustrates the problem — http://jsfiddle.net/cwzjL2uw/14/ .

Answer 1

When you do:

$(this)[0]

it becomes no more a jQuery object and it does not have the .search method. If you want to get the first element by class use:

elt = $(this).first();

Answer 2

You're using a strange mix of vanilla JS (like getting the [0] index of one element, and outerHTML) and jQuery.

Using jQuery, to find the first li element within $(this), you'd use:

$(this).find('li:first');