使用 Javascript 将类添加到每个第三个元素

2024-01-27

我正在尝试使用 javascript 选择父级的每三个元素并向其添加一个 css 类。对我来说听起来很简单,但我无法让它发挥作用。 我发现this https://stackoverflow.com/questions/4274673/javascript-loop-through-every-third-child-node?s=773e8b37-d89e-4c60-8512-9279e30cb5dd对我来说完成这个任务看起来很不错,但我对 javascript 实在是太笨了,以至于我的尝试没有成功:

var nodes = document.getElementsByClassName("ParentsClassName").childNodes;
for(i=0; i<nodes.length; i+=3) {
  this.className += ' newClassName';
}​

当我加载这个时,什么也没有发生。
任何修复、大开眼界和提示表示赞赏。
问候,玛丽安


var parents = document.getElementsByClassName("someClass"),
    forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach),
    filter = Array.prototype.filter.call.bind(Array.prototype.filter)

forEach(parents, addClassToEveryThirdChild)

function addClassToEveryThirdChild(parent) {
    filter(parent.children, selectEveryThirdChild)
        .forEach(addSomeClass)
}

function selectEveryThirdChild(elem, i) {
    return i % 3 === 0
}

function addSomeClass(elem) {
    elem.classList.add("newClassName")
}

或者用循环

var parents = document.getElementsByClassName("someClass")

for (var i = 0, ii = parents.length; i < ii; i++) {
    var parent = parents[i],
        children = parent.children

    for (var j = 0, jj = children.length; j < jj; j++) {
        var elem = children[j]
        if (j % 3 === 0) {
            elem.classList.add("newClassName")
        }
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Javascript 将类添加到每个第三个元素 的相关文章

随机推荐

  • 不返回 group_concat 具有空值的行

    我有以下 MySQL 查询 该查询应该从表 a 和 b 一对多关系 返回记录 以及从表 c 返回的任何值的逗号分隔列表 但是 表 c 中并不总是有记录 这就是为什么我使用 LEFT OUTER JOIN 将其连接到表 a SELECT a
  • C2059 语法错误“字符串”?

    extern C endif include
  • 如何抑制Excel下载时的文件损坏警告?

    我有一个链接到 Excel 2007 工作表的网页 它是一个 xls文件而不是 xlsx文件 当我单击链接时 我会看到通常的对话框 用于打开 保存 Excel 文件 单击 打开 后 我收到以下警告消息 您尝试打开的文件 filename x
  • 如何在没有 Visual Studio 的情况下安装 MSBuild 15.3?

    有没有办法在构建服务器上安装 MSBuild 15 3 版本而不安装 Visual Studio 2017 我尝试安装 Build Tools for Visual Studio 2017 https www visualstudio co
  • 在页面中央打印 html 文本

    我有一个下一个问题 试图用谷歌找到它 但没有找到什么可以帮助我 我有一个大的 HTML 文件需要打印 我使用 CSS 来分隔页面break after 问题是 如何在页面中央打印一个元素 不仅是水平居中 而且是垂直居中 HTML 看起来像这
  • 如何获取制表符?

    在 HTML 中 选项卡没有字符 但我很困惑为什么我可以在此处复制并粘贴一个字符 您看不到它的完整宽度 但如果您单击编辑我的问题 您会看到该字符 如果我可以复制并粘贴制表符 那么应该有一个可以编码为 html 的 unicode 等效项 我
  • 使用 ADFS IdP 进行单点注销的正确 LogoutRequest

    我成功使用 OneLogin java saml 库进行 SAML SSO 但 Active Directory 联合身份验证服务 ADFS 的 SLO 单点注销 存在问题 该库创建的 LogoutRequest 被 ADFS 拒绝 但被
  • 点覆盖问题

    我最近在测试中遇到了这个问题 给定一组点m 全部在 x 轴上 和一组n具有端点的线 l r 再次在 x 轴上 找到 的最小子集n这样所有的点都被一条线覆盖 证明你的解决方案总是能找到最小子集 我为它编写的算法的效果是 假设线存储为数组 左端
  • SQL-将长整数转换为日期时间

    我有一个数据库 其日期采用以下长整数格式 20100101000000 其中该时间为 2010 年 1 月 1 日 00 00 00 我希望能够将其转换为正常的 SQL 日期时间语法并返回 这可能吗 我只能走到这一步 SELECT CAST
  • 事务之间的竞争条件

    我正在使用 Spring MVC 开发 webapp 并在我的应用程序中有这样的方法 Transactional public void methodA Long id String color Fruit fruit entityMana
  • in_array() 期望参数 2 为数组,Classipress 中给出的字符串

    我在用着Classipress theme对于 wordpress 我正在尝试将我的精选广告粘贴到类别中 我发现一个返回此错误的代码 Warning in array expects parameter 2 to be array stri
  • Android 上 之间的区别

    我现在对两个明显元素之间的区别感到困惑 我认为仅使用 Google Play 会过滤掉不属于支持屏幕列表的设备 该应用程序不会显示在这些设备上的搜索结果中 我以为使用就足够了 但似乎不起作用 我也需要包含吗 有人可以向我解释自然语言的区别吗
  • 如何通过jquery从数据库接收数据? [wordpress.js]

    我正在尝试从 WordPress 主题的 js 文件中的数据库中获取一些数据 我尝试使用 jquery 的 post 但没有任何反应 还请建议我任何替代方案 js 文件中的代码 jq post abc php name kumar accI
  • 磁带平衡 Codility 培训计划

    我在 Codility 中提交了磁带平衡问题的解决方案 礼貌培训 1 问题描述如下 给出一个由 N 个整数组成的非空零索引数组 A 数组 A 代表磁带上的数字 任何整数 P 使得 0 我提交的解决方案是 class Solution pub
  • 我怎样才能避免codeigniter中的URL中的index.php [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我正在使用 apache 服务器 我
  • extern "C" 带有类和 DLL

    我得到了一个 C DLL 源代码 它使用extern C extern C class Something public declspec dllexport Something declspec dllexport virtual Som
  • 读取 Parquet 文件时是什么控制分区数量?

    我的设置 两个 Spark 集群 一份在 EC2 上 一份在 Amazon EMR 上 两者均使用 Spark 1 3 1 EMR集群已安装emr 引导操作 https github com awslabs emr bootstrap ac
  • play框架2.0支持memcached吗?

    我阅读了 Play Framework 2 0 文档 但没有任何关于 memcached 的文字 如何在 Play Framework 2 0 中使用 memcached 为什么在2 0中消失 在1 x中 这很容易 正如评论中已经指出的 默
  • 当 Jenkins 安装在登台服务器上时,如何在本地访问 Jenkins 仪表板?

    我已经通过 putty 在我的项目 网站 的 Ubuntu 临时服务器上安装了 Jenkins 就像我在 WINDOWS7 上一样 我启动了它并检查它是否在那里运行 但是当尝试访问时http staging website com 8080
  • 使用 Javascript 将类添加到每个第三个元素

    我正在尝试使用 javascript 选择父级的每三个元素并向其添加一个 css 类 对我来说听起来很简单 但我无法让它发挥作用 我发现this https stackoverflow com questions 4274673 javas