使用CSS或js，使用动态选择器选择任意li的下一个元素

Select next element of any li with the dynamic selector using CSS or js

本文关键字：任意 选择 li 元素 下一个 选择器 动态 CSS js 使用      更新时间：2023-09-26

我找不到得到这个的方法。

<ul>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
</ul>

并使用js将动态类应用于li onclick。然后选择下一个li来应用一些额外的css。

<ul>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class="test"></li>
    *******<li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
</ul>

现在我想在*******li上应用css。

希望我的问题很清楚。提前谢谢。

您可以在javascript中使用css选择器，因此可以执行以下操作：

var yourListItem = document.querySelector("li.test + li");

这里有一把小提琴给你

$("li").on("click", function(){
  $(this).addClass("yourclass");
  $(this).next("li").css("backgroung-color","red"); //add css
});

.next只能返回直接的下一个同级

$('li.test').on('click', function() {
    $('li.test').next('li').css("color", "red");
});

要更改*******的颜色，您需要将它们放在li标签中，如下所示：

<li class="">*******</li>

您也可以使用$（this）而不是@empiric 所说的$（'li.test'）

我认为jquery没有必要使用css标记来做同样的事情

它将选择紧接在测试类之后放置的<li>元素

例如：http://jsfiddle.net/Muthukumaru/q64tLhf5/

 li.test + li{
   **Your css styles **
 }

你应该试试这个

    $(document).ready(function(){
       $('li.test').next('li').css('color','green')
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class="test"></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
</ul>

使用下面的cod。阅读有关next（）的更多信息

检查DEMO

 $(document).ready(function(){
  $('li.test').next('li').css('color','red');
 });

点击事件

 $(document).ready(function(){
   $('li.test').on('click',function(){
    $(this).next('li').css('color','red');
   });
 });
相关文章：