Check clicked element is last child

Viewed 61

I want to show alert, when clicked elemenet is last child of parent element. My HTML structure:

<div class="row align-self-center " style="margin: 0px;">
  <div class="col-1 d-flex justify-content-center">
  </div>
  <div class="col modyfication-type-col d-flex justify-content-center">
    <span class="nav-element active-nav-element" data-modification-type="1"
      onclick="setActiveModyficationType(this)">1</span>
  </div>
  <div class="col modyfication-type-col d-flex justify-content-center">
    <span class="nav-element" data-modification-type="2"
      onclick="setActiveModyficationType(this)">2</span>
  </div>
  <div class="col modyfication-type-col d-flex justify-content-center">
    <span class="nav-element" data-modification-type="3"
      onclick="setActiveModyficationType(this)">3</span>
  </div>
</div>

In this case i want to show alert, when i clicked in this element (last element of parent row):

<div class="col modyfication-type-col d-flex justify-content-center">
    <span class="nav-element" data-modification-type="3"
      onclick="setActiveModyficationType(this)">3</span>
</div>

I know that i can get last element using somethink like this (but i can't using this in my case):

console.log($(".align-self-center .col:last-child").attr('class'))

I wanted to try doing something like this, but i get false every time

function setActiveModyficationType(e){
  var a = $(e).is(".align-self-center .col:last-child");
  console.log(a);
}
1 Answers

You could do it like this:

var a = $(e).is(".align-self-center .col:last-child span");

One problem is that you are comparing e (span) to .col:last-child

You could also use $(e).parent().is(":last-child")

Demo

function setActiveModyficationType(e) {
  var a = $(e).is(".align-self-center .col:last-child span");
  console.log(a);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row align-self-center " style="margin: 0px;">
  <div class="col-1 d-flex justify-content-center">
  </div>
  <div class="col modyfication-type-col d-flex justify-content-center">
    <span class="nav-element active-nav-element" data-modification-type="1" onclick="setActiveModyficationType(this)">1</span>
  </div>
  <div class="col modyfication-type-col d-flex justify-content-center">
    <span class="nav-element" data-modification-type="2" onclick="setActiveModyficationType(this)">2</span>
  </div>
  <div class="col modyfication-type-col d-flex justify-content-center">
    <span class="nav-element" data-modification-type="3" onclick="setActiveModyficationType(this)">3</span>
  </div>
</div>

Related