Question

我试图在一个＆＃34; li＆＃34;每次我点击“.parent”时都会出现这种情况。但它一直在处理所有的li元素。我想要的是当我在.parent上触发click事件时，第一个li应该突出显示，然后第二次触发点击，父第二个li突出显示等等 HTML：

<div class="parent">
  <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
  </ul>
</div>

JQuery的：

$('.parent').on('click', function(){
  $('li').addclass('true');
});

Answer 1

编辑完全不同的问题：

$('.parent').on('click', function(evt) {
  $(evt.target).find('li:not(.true)').first().addClass('true');
});

.true {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
  </ul>
</div>

Answer 2

试试这个

样式表

<style>
   .true{color:red;border:1px solid red;}
</style>

jquery代码

$(document).on('click','.parent',function(){
   $(this).find('ul li').addClass('true');
});

或者您可以使用jquery的css函数动态添加css，如下所示

$(document).on('click','.parent',function(){
   $(this).find('ul li').css({'color':'red','border':'1px solid red'});
});

如何在JQuery中单击其父元素时定位每个子元素

2 个答案: