Question

我有键盘布局。每一行都有一个类似于提供的结构 - 可以有charButtons（在“charRow”里面）和功能按钮 - “键盘行”的直接孩子单击时，我需要检查该按钮（类型a的元素）是行中的最后一个=无论是直接子项还是嵌套项。

<div class="keyboard-row">
  <a href="#" id="langSwitch" class="largeKey" lang-code="en">ENG</a>
  <div class="charRow">
    <a href="#" class="key" id="key2">1</a>
    <a href="#" class="key" id="key3">2</a>
    <a href="#" class="key" id="key4">3</a>
    <a href="#" class="key" id="key5">4</a>
    <a href="#" class="key" id="key6">5</a>
    <a href="#" class="key" id="key7">6</a>
    <a href="#" class="key" id="key8">7</a>
    <a href="#" class="key" id="key9">8</a>
    <a href="#" class="key" id="key10">9</a>
    <a href="#" class="key" id="key11">0</a>
    <a href="#" class="key" id="key12">_</a>
  </div>
  <a href="#" id="enter" class="largeKey">Search</a>
</div>
<div class="keyboard-row">
  <div class="charRow">
    <a href="#" class="key" id="key1">A</a>
    <a href="#" class="key" id="key2">S</a>
    <a href="#" class="key" id="key3">D</a>
    <a href="#" class="key" id="key4">F</a>
    <a href="#" class="key" id="key5">G</a>
    <a href="#" class="key" id="key6">H</a>
    <a href="#" class="key" id="key7">J</a>
    <a href="#" class="key" id="key8">K</a>
    <a href="#" class="key" id="key9">L</a>
  </div>
</div>

使用$(e.target).is(".keyboard-row a:last-child")对于id为“enter”和“key12”的元素都返回true。第一行和第二行样本的“key9”。

有没有办法更改代码，以便只获取第一行的id为“enter”而第二行为“key9”的元素？

Answer 1

您需要获取当前行，并仅在该行中搜索最后一行a。然后你可以测试这个目标是否是那个元素。

＆＃13;

$("a").click(function(e) {
  e.preventDefault();
  var curRow = $(this).closest(".keyboard-row");
  alert($(this).is($("a:last", curRow)));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="keyboard-row">
  <a href="#" id="langSwitch" class="largeKey" lang-code="en">ENG</a>
  <div class="charRow">
    <a href="#" class="key" id="key2">1</a>
    <a href="#" class="key" id="key3">2</a>
    <a href="#" class="key" id="key4">3</a>
    <a href="#" class="key" id="key5">4</a>
    <a href="#" class="key" id="key6">5</a>
    <a href="#" class="key" id="key7">6</a>
    <a href="#" class="key" id="key8">7</a>
    <a href="#" class="key" id="key9">8</a>
    <a href="#" class="key" id="key10">9</a>
    <a href="#" class="key" id="key11">0</a>
    <a href="#" class="key" id="key12">_</a>
  </div>
  <a href="#" id="enter" class="largeKey">Search</a>
</div>
<div class="keyboard-row">
  <div class="charRow">
    <a href="#" class="key" id="key1">A</a>
    <a href="#" class="key" id="key2">S</a>
    <a href="#" class="key" id="key3">D</a>
    <a href="#" class="key" id="key4">F</a>
    <a href="#" class="key" id="key5">G</a>
    <a href="#" class="key" id="key6">H</a>
    <a href="#" class="key" id="key7">J</a>
    <a href="#" class="key" id="key8">K</a>
    <a href="#" class="key" id="key9">L</a>
  </div>
</div>

＆＃13;

但为什么不呢：

$(e.target).is("#enter")

Answer 2

这应该有效

var $el = $(e.target);
var result = $el.is($el.parents('.keyboard-row:first').find("a:last"));
console.log(result); // true only for #enter and #key9

：last-child忽略嵌套结构

2 个答案: