专栏首页京程一灯jquery操作css相同class的节点

jquery操作css相同class的节点

平时的工作中有时候需要同时操作多个class相同的节点,这里使用jquery操作css相同class的节点。

如果直接使用$(‘.class’).val();或$(‘.class’).attr(”);则只能获取第一个class为指定值的dom节点。

如果想获得所有class为指定值的dom节点,则需要先获取数组,再遍历数组以此获取每一个节点对应的属性值。

下面是例子:

例如有如下html代码:

<input class="class_example"  /><input class="class_example"  /><input class="class_example"  /><input class="class_example"  />

对应操作的js代码:

var idArr = new Array(); var idsContainer = $(".class_example");  //获取所有节点的dom数组var len = idsContainer.length;               //数组长度for(var index = 0; index < len; index++){    var $container = $(idsContainer[index]); //循环遍历每一个dom节点    var id  = $container.attr("fid");//获取属性值    // or     var id  = $container.val();    alert(id);    idArr.push(id);} //数组转字符串ids = idArr.join(','); //数组转字符串转数组str.split("")

往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 你真的需要一个CSS实用工具集吗?

    让我们先来定义:一个CSS工具集库是一个拥有许多可用于做许多一次性小事的样式表。如调整margin和padding的类。设置颜色的类。设置具体样式属性的类。设置...

    疯狂的技术宅
  • CSS元素选择器是怎样运作的?

    在前端工程师的日常工作中,使用 CSS 元素选择器是稀松平常的事;无论你是编写一般的 CSS 还是需要经过编译的 SASS,SCSS,LESS等,最终都被编译成...

    疯狂的技术宅
  • 在 Node.js 上运行 Flutter Web 应用和 API[每日前端夜话0xDC]

    大量的跨平台应用开发框架,使你可以编写一次代码,然后在 Android,iOS 等多个平台上甚至在台式机上运行。你可能听说过一些流行的框架,例如 Ionic,X...

    疯狂的技术宅
  • 手写一个orm框架-2

    ​ 想要实现一个orm的功能,我觉得就是要将class和数据库中的表创建映射关系。把class的名称和表的名称,class属性名称和表的字段名称,属性类型与表的...

    何白白
  • iOS Runtime面试题(一个objc对象的isa的指针指向什么?有什么作用?)

    1.Root class (class)其实就是NSObject,NSObject是没有超类的,所以Root class(class)的superclass指向...

    iOSSir
  • 类图的6大关系详解

    以下类图使用 PlantUML 绘制,更多语法及使用请参考:http://plantuml.com/ 。

    李红
  • 类图的6大关系详解

    以下类图使用 PlantUML 绘制,更多语法及使用请参考:plantuml.com/ 。

    李红
  • 从源码的角度搞懂 Java 动态代理!

    最近,看了一下关于RMI(Remote Method Invocation)相关的知识,遇到了一个动态代理的问题,然后就决定探究一下动态代理。

    Java技术栈
  • android自动化埋点了解一下

    1、手动在onClick等方法下粗鲁的➕埋点,嗯,是最最原始的一种方式了,没有比这个代码更加简洁的了,按需来加,缺点是,麻烦,得一个个加,漏掉没加,就只能等下一...

    brzhang
  • 打好Java基础,从使用内部类开始!

    大家好,我是小菜,一个渴望在互联网行业做到蔡不菜的小菜。可柔可刚,点赞则柔,白嫖则刚!「死鬼~看完记得给我来个三连哦!」

    蔡不菜丶

扫码关注云+社区

领取腾讯云代金券