-1

I have a simple layout like this..

	
  $('#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>

I am trying to get the first item item1 when link 5 is clicked, but it is showing me the container.

am I using first wrong?

3
  • 1
    first() means “first in this set”, not “first child.” So the first in the set of one is the container itself. You’ll need to select the first of children() probably Aug 25, 2019 at 15:28
  • 1
    Well you're not using it wrong but you're expecting it to do something different than what it actually does. If you have a jQuery object referring to a list of DOM elements, then .first() reduces it to just the first object. It does not do any further traversal or searching in the DOM.
    – Pointy
    Aug 25, 2019 at 15:28
  • 1
    If it were me I'd make sure all those "item" <div> elements had the specific class plus a generic class like "item".
    – Pointy
    Aug 25, 2019 at 15:29

2 Answers 2

3

The issue is because you're calling first() on the .container itself. If you want to get the .item1, then call first() on the children() of the container:

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>

0

You can use code as below:

 $('#link5').on('click', function(event) {

      console.log("Link Clicked");

      var $element = $( this );

      container = $element.closest('.container');
      first = container.find("div:first-child");

      console.log(first);

  });

Your current code is not working as first() will return first element having container class which is not required in your case. Hope it helps you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.