又来提问-querySelectorAll 获取到元素后怎么获得 ID?

2021-08-03 11:44:48 +08:00
 zhuzhuaini

例子_HTML 代码如下:

<id='001' clas='even-row ui-selected'>

<id='002' clas='even-row ui-selected'>

<id='003' clas='even-row'>

<id='004' clas='even-row ui-selected'>

以上例子中 ID 是不同的,相同点是 CLASS 有相同之处 我的目的是寻找 class 中带有 ui-selected 的 ID 值 也就是我需要获取到 001 002 004 当我使用 querySelectorAll(ui-selected)是 的确能查找到到 3 个元素 分别为 1 2 4 但是他会将整个元素都输出出来,那我怎么样才能将这三个元素中的 ID 取出来(我只需要 ID ) 可能表述不是很清楚,百度搜索了一阵也没有我想要的答案,希望大佬解答 谢谢~

1966 次点击
所在节点    JavaScript
12 条回复
gogolang
2021-08-03 11:54:23 +08:00
jquery each 方法遍历
crazybinggan
2021-08-03 11:54:56 +08:00
摸🐟

```javascript
[...document.querySelectorAll('.ui-selected')].map(item => item.id)
```
cheese
2021-08-03 11:55:02 +08:00
取到的是一个 NodeList, 你可以用 for of 对这个 list 做循环,然后再取出 id 。或者用 Array.form 转化为数组,用数组的方法循环
gogolang
2021-08-03 11:56:31 +08:00
```javascript
$.each($('.ui-selected'), function (k, v) {
console.log($(v).attr('id'))
})
```
violetlai
2021-08-03 12:19:58 +08:00
感觉你这整个需求想法思路都是不对的

id 是唯一标识,目的就是为了方便引用,不应该这样查询吧

而是通过 node list 的下标来查询操作
zhuzhuaini
2021-08-03 13:34:51 +08:00
@violetlai 是这样的,我是想获取一个表格当中的已经勾选的数据 ID,当我勾选一行时,td 标签中 class 就具有 ui-selected,然后 td 标签中还含有 ID,我就是需要这个 ID 继续进行 post,所以我要获取的就是这个变化的 ID
sgiyy
2021-08-03 14:03:18 +08:00
@zhuzhuaini 直接在 行选中 /取消选中 的时候把 id 记录下来维护到一个变量里不更方便么。
zhuzhuaini
2021-08-03 14:53:26 +08:00
@crazybinggan 我快疯了 一直在研究你这个代码 我一直以为 document 前面的...的意思是省略号,意思是我前面的代码,,,,,,,所以我一直在琢磨这个代码到底啥意思 测来测去测了好几个小时,就是折腾不出 id 来,直到刚刚偶然间,,,我把前面的...复制过去忘了删掉,,然后跑了下发现直接出 ID 了。。。。。我人都傻了!!!!!
asdjgfr
2021-08-03 16:52:40 +08:00
@zhuzhuaini 扩展运算符还有很多其他贼好用的用法,不过盲猜你的项目没有 babel,注意某些新特性的兼容性。https://es6.ruanyifeng.com/?search=spread&x=0&y=0#docs/array#%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6
crazybinggan
2021-08-03 18:02:15 +08:00
@zhuzhuaini #9 楼补充了,怪我没说清楚 XD,不过这课上得印象深刻 :doge
libook
2021-08-04 10:38:22 +08:00
上面应该已经解决题主的问题了。

建议题主去 MDN 上看一看 JavaScript 和 DOM 的相关文档,至少了解一下都有哪些功能,等写程序的时候就能想到有那么一个功能可以满足自己的需求,然后再查 MDN 文档仔细看一看就可以了。

我举个例子:

我知道 document.querySelectorAll 是个可以选取元素的方法,但我不确定它返回的是什么,就可以去 MDN 上查这个方法的文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll

看到返回值那里写的是 NodeList,但我不知道 NodeList 是什么,于是可以点击跳转到 NodeList 的文档: https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList

文档里讲了 NodeList 是节点的集合,并且详细讲了如何遍历这个集合,也正好用了 querySelectorAll 来作为例子,那么我就可以遍历取出每个节点了。
此时我不清楚 Node 是啥,于是就搜 Node 的文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Node

知道了 Node 是个基本类型,各种 DOM API 都是继承自 Node,父类有的属性通常子类也会有,那么可以先看看 Node 有没有 id 属性,看来没有;
那么可能 id 是 DOM API 的属性,DOM API 有很多种,文档中列举了一些 DOM API,如 Element 就是一种 DOM API,在看过了几种 DOM API 的文档之后,了解到 Document 下的对象都是 Element,那么就可以去看 Element API 的文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Element

MDN 里的 API 文档主体包括三个部分,属性、方法、事件,那么咱们找的是 id 属性,所以往下拉,果然找到了 id 属性。
zhuzhuaini
2021-08-04 13:58:27 +08:00
@libook 十分感谢,我确实没有看过文档,基本上就是我有一个需求,我就按照传统的思维去把他实现,遇到网上查不到的不好描述的就只能来发帖问了,这样确实不好,您的建议我觉得很好,有空时确实应该多看看相关文档,这样就可以做到像您说的最起码能想到有类似功能可以实现。 再次感谢!
@crazybinggan 确实映像深刻!

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/793345

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX