在单击的 li 上添加类并从兄弟姐妹中删除类

2024-05-01

单击时,我想将一个类添加到锚标记,并从所有同级中删除该类。但是,我当前的代码似乎没有从其他元素中删除该类,尽管它似乎确实在单击时添加了该类。

这是我的代码:

$("ul li").each(function(){
    $(this).click(function(){
       $(this).children().addClass('cell-selected').siblings().removeClass('cell-selected');
    });
});
.cell-selected { color: #fff; background: #5b2200; border-color: #ce5209; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a class="cell">Plan 1.1</a></li>
    <li><a class="cell">Plan 1.2</a></li>
    <li><a class="cell">Plan 1.3</a></li>
</ul>
<ul>
    <li><a class="cell">Plan 2.1</a></li>
    <li><a class="cell">Plan 2.2</a></li>
    <li><a class="cell">Plan 2.3</a></li>
</ul>

上传于http://jsfiddle.net/9wky66ju/24/ http://jsfiddle.net/9wky66ju/24/


jsFiddle Demo http://jsfiddle.net/971n28hh/

您可以使用.parent()返回兄弟姐妹,但随后您需要选择班级cell-selected为了从这些元素中删除该类。

$("ul li").click(function(){ // don't need each (click does this internally)
 $(this).children().addClass('cell-selected') //add cell-selected class to a
 .parent() //go back to li
 .siblings() //look at siblings
 .find('.cell-selected') //find cell-selected elements
 .removeClass('cell-selected'); //remove the class
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在单击的 li 上添加类并从兄弟姐妹中删除类 的相关文章

随机推荐

  • 每个 start_url 已抓取多少个项目

    我使用 scrapy 抓取 1000 个 url 并将抓取的项目存储在 mongodb 中 我想知道每个网址找到了多少个项目 从 scrapy 统计数据我可以看到 item scraped count 3500但是 我需要分别对每个 sta
  • 从 R 运行 powershell 命令:表达式或语句中出现意外标记

    我尝试了以下命令 在 powershell 窗口中有效 system powershell command Get ChildItem Filter html Where Object LastWriteTime ge 11 12 2021
  • 正则表达式 - 匹配包含 2 个或更多 2 个字母元音序列的单词

    我想知道如何匹配包含 2 个或更多 2 个字母元音序列的单词 使用 javascript 版本的正则表达式 例如 visionproof steamier preequip 我现在正在学习正则表达式 这就是我到目前为止所拥有的 它只匹配包含
  • 通过边框拖放调整 div 大小,无需添加额外的标记

    我有一个绝对定位的侧面板 我需要通过拖动此边框来更改其宽度 我还需要更改边框悬停上的光标 是否可以在不添加另一个 div 进行拖动的情况下做到这一点 这是标记 right panel position absolute border lef
  • C# Windows 应用程序中的文件上传

    在我的 C Windows 应用程序中 我想上传 pdf 文件 但在我的工具箱中找不到 FileUpload 控件 我如何在 C Windows 应用程序中上传 pdf 文件 regards 将 OpenFileDialog 控件放在窗体上
  • 在 ASP.net 中使用 NVP API 时 Paypal SetExpressCheckout 出现问题

    Hi 我正在实现 Facebook 游戏和 Paypal 快速结账支付服务之间的集成 我的网站是在 ASP net 中开发的 我使用 NVP API 进行集成 我的问题是我不断收到 10400 错误 订单总计丢失 我的代码是 Set the
  • 下载链接选项在显示标记中不起作用

    您好 我正在使用显示标签库显示表格 它工作正常 但是当我导出链接时 它遇到了麻烦 所以可以帮助我如何做到这一点 我的代码将是这样的
  • 如何在OpenAPI中引用响应组件?

    我正在为我的 API 编写 OpenAPI 定义 我在用components的响应 但当我尝试引用这些组件时 Swagger Editor 显示错误 responses ref components responses 401 ref co
  • SQL 查询中的外语/重音字符

    我正在使用 Java 和 Spring 的 JdbcTemplate 类在 Java 中构建一个 SQL 查询来查询 Postgres 数据库 但是 我在执行包含外来 重音字符的查询时遇到问题 例如 修剪后的 代码 JdbcTemplate
  • Apollo 无法在更新中访问 queryVariables:突变后

    我正在尝试使用 update 在执行突变后更新查询 问题是商店中的查询应用了多个不同的变量 我想更新查询并使用相同的变量返回它 我在文档中发现 updateQueries 有一个包含 queryVariables 的选项 它们是执行查询时使
  • Django 查询集权限

    我正在构建一个相当复杂的Django在电子邮件扫描服务之上使用的应用程序 这Django应用程序是使用 Python 3 5 编写的 该应用程序主要使用Django Rest Framework处理与浏览器前端的通信 我目前遇到的问题是我尝
  • AppDomain.CurrentDomain.GetAssemblies 失败并出现 ReflectionTypeLoadException

    在单元测试期间 我遇到了以下代码的问题 该代码要求所有加载的程序集 var res AppDomain CurrentDomain GetAssemblies SelectMany x gt x GetTypes ToList 此代码失败并
  • SAX:如何获取元素的内容

    我在理解使用 SAX 解析 XML 结构时遇到了一些困难 假设有以下 XML
  • grunt jasmine-node 测试运行两次

    我设置 grunt 来运行 node js 茉莉花测试 由于某种原因 使用此配置 结果总是显示双倍的测试 这是我的配置 我在用着茉莉花节点 https github com jasmine contrib grunt jasmine nod
  • strstr() 函数类似,忽略大小写

    我有两根弦 可以说 str1 One Two Three and str2 two 我想知道是否有任何函数可以检查第一个字符串中第二个字符串的匹配 并返回指向第一个字符串的指针 例如strstr 但它不会将相同的字母 大写或小写 视为两个不
  • 对堆排序有一个直观的理解吗?

    在学校 我们目前正在学习 Java 排序算法 我的作业是堆排序 我读了书 试图尽可能多地了解 但似乎我无法理解这个概念 我并不是要求您为我编写一个 Java 程序 只要您能尽可能简单地向我解释堆排序的工作原理即可 是的 所以基本上你拿一个堆
  • 当代码依赖于两个对象的子类型时,是否有设计模式可以处理

    我会尽力尽可能明确 以防有比回答我的问题更好的解决方案 我正在使用 C 工作 我有一个报告模板 可以包含任意数量的打开的 功能 功能可能是信息表 饼图 条形图 列表等 我将报告生成为文本文件或 PDF 将来可能有其他选项 到目前为止我有一个
  • 在 C# .Net 中将小数转换为小时、分钟和秒

    我在数据库中有一个分钟字段 例如 138 34 我需要将其转换回 HH MM SS 最简单的方法是什么 您可以使用TimeSpan FromMinutes minutesInDouble 以双精度格式传递上述值 欲了解更多信息 检查 MSD
  • Pandas - 使用其他列值作为列名选择列

    我有一个包含一列的数据框 我们称之为 名称 names 具有其他列的名称 我想添加一个新列 该列的每一行都有基于 名称 列中包含的列名称的值 Example 输入数据框 pd DataFrame from dict a 1 2 3 4 b
  • 在单击的 li 上添加类并从兄弟姐妹中删除类

    单击时 我想将一个类添加到锚标记 并从所有同级中删除该类 但是 我当前的代码似乎没有从其他元素中删除该类 尽管它似乎确实在单击时添加了该类 这是我的代码 ul li each function this click function thi