javascript - jQuery first() 未按预期工作 - 返回容器

Question

我有一个像这样的简单布局..

	
  $('#link5').on('click', function(event) {
  
      console.log("Link Clicked");
      
      var $element = $( this );
      
      container = $element.closest('.container');
      

      
      first = container.first();
      
      console.log(first);
  
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

    <div class="item1">
        <div class="itemcontainer">
            Item 1
            <a id="link1" class="customlink" href="#">
                Click
            </a>
        </div>
    </div>
    
    <div class="item2">
        <div class="itemcontainer">
            Item 2
            <a id="link2" class="customlink" href="#">
                Click
            </a>
        </div>
    </div>
    
    <div class="item3">
        <div class="itemcontainer">
            Item 3
            <a id="link3" class="customlink" href="#">
                Click
            </a>
        </div>
    </div>
    
    <div class="item4">
        <div class="itemcontainer">
            Item 4
            <a id="link4" class="customlink" href="#">
                Click
            </a>
        </div>
    </div>
    
    <div class="item5">
        <div class="itemcontainer">
            Item 5
            <a id="link5" class="customlink" href="#">
                Click
            </a>
        </div>
    </div>
    
    <div class="item6">
        <div class="itemcontainer">
            Item 6
            <a id="link6" class="customlink" href="#">
                Click
            </a>
        </div>
     </div>
    
    <div class="item7">
        <div class="itemcontainer">
            Item 7
            <a id="link7" class="customlink" href="#">
                Click
            </a>
        </div>
    </div>

</div>

当单击链接 5 时，我尝试获取第一个项目 item1，但它向我显示了容器。

我使用的first是错误的吗？

Answer 1

问题是因为您在 .container 本身上调用 first() 。如果您想获取 .item1，请在容器的 children() 上调用 first():

let first = container.children().first();  

$('#link5').on('click', function(event) {
  var $element = $(this);
  let container = $element.closest('.container');
  let first = container.children().first();  
  console.log(first);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="item1">
    <div class="itemcontainer">
      Item 1
      <a id="link1" class="customlink" href="#">
        Click
      </a>
    </div>
  </div>
  <div class="item2">
    <div class="itemcontainer">
      Item 2
      <a id="link2" class="customlink" href="#">
        Click
      </a>
    </div>
  </div>
  <div class="item3">
    <div class="itemcontainer">
      Item 3
      <a id="link3" class="customlink" href="#">
        Click
      </a>
    </div>
  </div>
  <div class="item4">
    <div class="itemcontainer">
      Item 4
      <a id="link4" class="customlink" href="#">
        Click
      </a>
    </div>
  </div>
  <div class="item5">
    <div class="itemcontainer">
      Item 5
      <a id="link5" class="customlink" href="#">
        Click
      </a>
    </div>
  </div>
  <div class="item6">
    <div class="itemcontainer">
      Item 6
      <a id="link6" class="customlink" href="#">
        Click
      </a>
    </div>
  </div>
  <div class="item7">
    <div class="itemcontainer">
      Item 7
      <a id="link7" class="customlink" href="#">
        Click
      </a>
    </div>
  </div>
</div>