嗨!我在jquery函数$(this).childen().val()中遇到了问题。

Question

首先是我的html和js&jquery

​

(function($) {
    
    $('.list-group li').click(function(){
        console.log("push li");
        console.log($(this).attr('class'));
        console.log($(this).children('.hidden_input').val());
    });
    
})(jQuery);

<ul class="list-group" id="serachList">     
  <li class="list-group-item">
    <div class="media align-items-lg-center flex-column flex-lg-row p-3">
      <div class="media-body order-2 order-lg-1">
        <h5 class="mt-0 font-weight-bold mb-2">card 1</h5> 
        <input class="hidden_input" type="hidden" id="hospitalId" value="1">               
      </div>
    </div>
  </li>
  <li class="list-group-item">
    <div class="media align-items-lg-center flex-column flex-lg-row p-3">
      <div class="media-body order-2 order-lg-1">
        <h5 class="mt-0 font-weight-bold mb-2">card 2</h5> 
        <input class="hidden_input" type="hidden" id="hospitalId" value="1">               
      </div>
    </div>
  </li>
</ul>

​

当我单击li时，返回正确的答案(li的类)，但console.log($(this).children('.hidden_input').val())；返回未定义！如何获取this.children.val？

此代码适用于带无限滚动的自由板(卡片式)

Answer 1

你看到的仅仅是“直接”的子类。使用.find()而不是.children()。

请参阅：https://api.jquery.com/children/

.children()方法与.find()方法的不同之处在于，.children()只向下遍历DOM树的一个级别，而.find()可以向下遍历多个级别以选择后代元素(孙子元素等)。也是。

​

(function($) {
    
    $('.list-group li').click(function(){
        console.log("push li");
        console.log($(this).attr('class'));
        console.log($(this).find('.hidden_input').val());
    });
    
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group" id="serachList">     
  <li class="list-group-item">
    <div class="media align-items-lg-center flex-column flex-lg-row p-3">
      <div class="media-body order-2 order-lg-1">
        <h5 class="mt-0 font-weight-bold mb-2">card 1</h5> 
        <input class="hidden_input" type="hidden" id="hospitalId" value="1">               
      </div>
    </div>
  </li>
  <li class="list-group-item">
    <div class="media align-items-lg-center flex-column flex-lg-row p-3">
      <div class="media-body order-2 order-lg-1">
        <h5 class="mt-0 font-weight-bold mb-2">card 2</h5> 
        <input class="hidden_input" type="hidden" id="hospitalId" value="2">               
      </div>
    </div>
  </li>
</ul>

​