Question

我正在尝试准确地确定我的循环无序列表的第一行和最后一行，其中包含仅通过单击它们的记录。这个无序列表包含从数据库绑定的记录。

例如，如果这是我的示例html：

$("#container").on("click", ".filenames", function () {
// Please add something here...

alert("This is the first row.");
});

如果我想点击该无序列表的第一行，它会发出一条警告，上面写着“这是第一行。”如下所示：

$("#container").on("click", ".filenames", function () {
// Please add something here...

alert("This is the last row.");
});

如果我想点击该无序列表的最后一行，它会发出警告，说“这是最后一行。”如下所示：

figure

我该怎么做？感谢

Answer 1

使用jQuery :first和:last伪类选择器。

npm install --only=dev ../dirB

npm install

$("#container").on("click", ".filenames:first", function () {    
  alert("This is the first row.");
}).on("click", ".filenames:last", function () {
  alert("This is the last row.");
});

使用css :first-child和:last-child伪类选择器。

$("#container").on("click", ".filenames:first", function() {
  alert("This is the first row.");
}).on("click", ".filenames:last", function() {
  alert("This is the last row.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <ul id="Unorderedlist">
    <li id="ListofContent" class="ul-content">
      <div id="divcontent" class="divcontent">
        <label id="filenames" class="filenames">Click</label>
      </div>
    </li>
    <li id="ListofContent" class="ul-content">
      <div id="divcontent" class="divcontent">
        <label id="filenames" class="filenames">Click</label>
      </div>
    </li>
    <li id="ListofContent" class="ul-content">
      <div id="divcontent" class="divcontent">
        <label id="filenames" class="filenames">Click</label>
      </div>
    </li>
  </ul>
</div>

$("#container").on("click", "li:first-child .filenames", function () {    
  alert("This is the first row.");
}).on("click", "li:last-child .filenames", function () {
  alert("This is the last row.");
});

如何使用jquery通过单击函数确定无序列表<ul>元素的第一行和最后一行？

1 个答案: