文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >修改使用jQuery创建的数组

问修改使用jQuery创建的数组
EN

Stack Overflow用户
提问于 2018-06-02 12:37:33
回答 4查看 63关注 0票数 1

我花了一天的时间试图弄清楚这个问题。我可以很容易地从DOM类创建一个数组。

数组返回i.fa fa-diamond、i.fa fa-paper-plane等。我试图解决的问题是从fa fa-字符串中删除i.。我尝试过.remove()、.splice()、filter、$map等方法，但没有太多运气。我想删除i.，或者找到一种避免i.的简单方法来创建数组。

编辑:我应该提到这是一项任务的一部分，我知道有更简单的方法来实现这一点，但我的任务是使用jQuery。

​

代码语言：javascript
复制
var obj = $('.card > .fa');
var cardsName = $.makeArray(obj);
console.log(cardsName);
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="deck">
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card match">
    <i class="fa fa-anchor"></i>
  </li>
  <li class="card">
    <i class="fa fa-bolt"></i>
  </li>
  <li class="card">
    <i class="fa fa-cube"></i>
  </li>
  <li class="card match">
    <i class="fa fa-anchor"></i>
  </li>
  <li class="card">
    <i class="fa fa-leaf"></i>
  </li>
  <li class="card">
    <i class="fa fa-bicycle"></i>
  </li>
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-bomb"></i>
  </li>
  <li class="card">
    <i class="fa fa-leaf"></i>
  </li>
  <li class="card">
    <i class="fa fa-bomb"></i>
  </li>
  <li class="card open show">
    <i class="fa fa-bolt"></i>
  </li>
  <li class="card">
    <i class="fa fa-bicycle"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card">
    <i class="fa fa-cube"></i>
  </li>
</ul>

​

split
javascript
jquery
arrays
string
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-06-02 12:44:14

如果想要获取类的数组，可以使用map和get类属性

​

代码语言：javascript
复制
var obj = $('.card > .fa').map(function() {
  return $(this).attr('class');
}).get();

console.log(obj);
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="deck">
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card match">
    <i class="fa fa-anchor"></i>
  </li>
  <li class="card">
    <i class="fa fa-bolt"></i>
  </li>
  <li class="card">
    <i class="fa fa-cube"></i>
  </li>
  <li class="card match">
    <i class="fa fa-anchor"></i>
  </li>
  <li class="card">
    <i class="fa fa-leaf"></i>
  </li>
  <li class="card">
    <i class="fa fa-bicycle"></i>
  </li>
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-bomb"></i>
  </li>
  <li class="card">
    <i class="fa fa-leaf"></i>
  </li>
  <li class="card">
    <i class="fa fa-bomb"></i>
  </li>
  <li class="card open show">
    <i class="fa fa-bolt"></i>
  </li>
  <li class="card">
    <i class="fa fa-bicycle"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card">
    <i class="fa fa-cube"></i>
  </li>
</ul>

​

票数 1
EN

Stack Overflow用户

发布于 2018-06-02 12:43:26

不需要像jQuery这样的重量级库，只需选择元素并使用Array.from map到它们的className数组：

​

代码语言：javascript
复制
const classes = Array.from(
  document.querySelectorAll('.deck i'),
  i => i.className
);
console.log(classes);
代码语言：javascript
复制
<ul class="deck">
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card match">
    <i class="fa fa-anchor"></i>
  </li>
  <li class="card">
    <i class="fa fa-bolt"></i>
  </li>
  <li class="card">
    <i class="fa fa-cube"></i>
  </li>
  <li class="card match">
    <i class="fa fa-anchor"></i>
  </li>
  <li class="card">
    <i class="fa fa-leaf"></i>
  </li>
  <li class="card">
    <i class="fa fa-bicycle"></i>
  </li>
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-bomb"></i>
  </li>
  <li class="card">
    <i class="fa fa-leaf"></i>
  </li>
  <li class="card">
    <i class="fa fa-bomb"></i>
  </li>
  <li class="card open show">
    <i class="fa fa-bolt"></i>
  </li>
  <li class="card">
    <i class="fa fa-bicycle"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card">
    <i class="fa fa-cube"></i>
  </li>

​

票数 4
EN

Stack Overflow用户

发布于 2019-01-16 12:08:53

​

代码语言：javascript
复制
const arr = document.querySelectorAll('.deck  i');
const classArr = [...arr].map(ele => ele.className);
console.log(classArr);
代码语言：javascript
复制
<ul class="deck">
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card match">
    <i class="fa fa-anchor"></i>
  </li>
  <li class="card">
    <i class="fa fa-bolt"></i>
  </li>
  <li class="card">
    <i class="fa fa-cube"></i>
  </li>
  <li class="card match">
    <i class="fa fa-anchor"></i>
  </li>
  <li class="card">
    <i class="fa fa-leaf"></i>
  </li>
  <li class="card">
    <i class="fa fa-bicycle"></i>
  </li>
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-bomb"></i>
  </li>
  <li class="card">
    <i class="fa fa-leaf"></i>
  </li>
  <li class="card">
    <i class="fa fa-bomb"></i>
  </li>
  <li class="card open show">
    <i class="fa fa-bolt"></i>
  </li>
  <li class="card">
    <i class="fa fa-bicycle"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card">
    <i class="fa fa-cube"></i>
  </li>
</ul>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50653548

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档