javascript - jQuery 选择器选择每个字母的第一个元素

Question

我有一个关于 jQuery 选择器的快速问题。我有以下 HTML 结构:

<ul>
    <li class="ln-a"></li>
    <li class="ln-b"></li>
    <li class="ln-b"></li>
    <li class="ln-b"></li>
    <li class="ln-c"></li>
    <li class="ln-f"></li>
    <li class="ln-f"></li>
    <li class="ln-f"></li>
</ul>

我的问题是:如何只从每个字母中选择第一个 li？是否可以只使用 CSS 选择器？

我已经尝试过:jQuery('li:regexp(class, ln-.*):first').addClass('separator'); 但这并不像预期的那样工作。

Answer 1

我不知道如何使用单个选择器来完成。这是一种通过迭代元素来实现的方法。我敢肯定还有其他方法可以做到这一点...

$(document).ready(function() {
  $('[class^="ln-"]').each(function(ind, ele) {
    var cls = $(ele).attr('class');
    $('.' + cls).first().addClass('seperator');
  });
});

.seperator {
  border-top: 1px solid #cccccc;
}

<ul>
  <li class="ln-a">a</li>
  <li class="ln-b">b</li>
  <li class="ln-b">b</li>
  <li class="ln-b">b</li>
  <li class="ln-c">c</li>
  <li class="ln-f">f</li>
  <li class="ln-f">f</li>
  <li class="ln-f">f</li>
</ul>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>