检查单击的元素是最后一个子元素

Question

当单击的elemenet是父元素的最后一个子元素时，我要显示报警。我的HTML结构：

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

在本例中，我希望在单击该元素（父行的最后一个元素）时显示报警：

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

我知道我可以使用这样的somethink获得最后一个元素（但我不能在我的例子中使用这个）：

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

我想试着做这样的事，但每次都是假的

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

Answer 1

你可以这样做：

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

一个问题是您正在比较e(span)与.col:last-child

您还可以使用$(e).parent().is（“：last-child”）

演示

null

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>