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

我无法通过单个选择器看到如何做到这一点。这是通过迭代元素来实现它的方法。我确定还有其他方法可以做到这一点......

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

听起来你想要一个班级＆＃39;在jQuery中实现。我不认为你可以做到这一点，而不必像泰德这样优秀灵活的答案那样迭代。

然而，当你要求CSS解决方案时，下面是用CSS解决问题的可怕方法。我不会这样做，因为它取决于你的css课程是僵化和可预测的，但如果你知道你的li将永远是这样的话就可以了。

.ln-a:first-child,
.ln-a + .ln-b,
.ln-b + .ln-c {
    background: red;    
}

https://jsfiddle.net/cs1fp3tt/1/

Answer 3

有两个步骤可以解决您的问题：

选择该类具有li前缀
的所有li-个元素
可以使用jQuery prefix 选项完成该任务： [name | =“value”]

选择具有指定属性的元素，其值等于给定字符串或以该字符串后跟连字符（ - ）开头。

过滤除了第一次出现的具有给定类别的元素这可以使用jQuery filter 方法完成，该方法检查给定节点是否与第一个节点相同。

将匹配元素集减少到与选择器匹配的元素集通过功能测试。

以下代码已实现：

＆＃13;

$("li[class|=ln]")
  .filter(function() {
    var klass = $(this).attr('class');
    var $firstNode = $(this).parent().find('.' + klass + ':first');
    return $(this)[0] === $firstNode[0];
  })
  .addClass('seperator')

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

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

3 个答案: