在JQuery中單擊父元素時如何定位每個子元素

Question

每次單擊“ .parent”時，我都會嘗試對一個“ li”元素產生影響。 但是它會同時處理所有li元素。 我想要的是當我在.parent上觸發click事件時，應該突出顯示第一個li，然后第二次我觸發單擊，則將parent突出顯示第二個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'});
});