在 $(this) 中选择元素时遇到问题，即使我可以在 $(this) innerHTML 中看到它

Question

我正在使用 jQuery 1.12。我正在尝试 select $(this) 中的一个元素，使用

 $(".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;
    }
 });

即使第一个列表打印出来

    <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>

其中可以看到“li”元素，下一行

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

returns

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

如何 select $(this) 中的第一个“li”元素？这是说明问题的 Fiddle — http://jsfiddle.net/cwzjL2uw/14/ .

Answer 1

您正在使用普通 JS（例如获取一个元素的 [0] 索引和 outerHTML）和 jQuery.

的奇怪组合

使用 jQuery，查找 $(this) 中的第一个 li 元素，您将使用：

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

Answer 2

当你这样做时：

$(this)[0]

它不再是一个 jQuery 对象并且它没有 .search 方法。如果您想通过 class 获取第一个元素，请使用：

elt = $(this).first();

在 $(this) 中选择元素时遇到问题，即使我可以在 $(this) innerHTML 中看到它

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

html

css

jquery

selector