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

How to target each child element when their parent is clicked in JQuery

本文关键字：元素 定位 单击 JQuery      更新时间：2023-09-26

每次单击".parent"时，我都会尝试对一个"li"元素产生效果。 但它会同时处理所有 li 元素。我想要的是当我在.parent上触发单击事件时，第一个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');
});
编辑完全不同的

问题：

$('.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>

试试这个

样式表-表

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

j查询代码

$(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'});
});
相关文章：