修改用 jQuery 创建的数组

Posted

技术标签:

【中文标题】修改用 jQuery 创建的数组【英文标题】：Modify array created with jQuery 【发布时间】：2018-11-12 04:38:23 【问题描述】：

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

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

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

var obj = $('.card > .fa');
var cardsName = $.makeArray(obj);
console.log(cardsName);
<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>

【问题讨论】：

你想得到什么？ lis 的数组？唯一类的字符串数组 (fa-diamond)，还是什么？ 我想要得到的数组是 ['fa fa-diamond', 'fa fa-paper-plane-o', 'fa fa-anchor', 'fa fa-bolt', 'fa fa-cube'，'fa fa-anchor'，'fa fa-leaf'，'fa fa-bicycle'，'fa fa-diamond'，'fa fa-bomb'，'fa fa-leaf'，' fa fa-bomb'、'fa fa-bolt'、'fa fa-bicycle'、'fa fa-paper-plane-o'、'fa fa-cube']。我得到 ['i.fa fa-diamond', 'i.fa fa-paper-plane-o', 'i.fa fa-anchor', 'i.fa fa-bolt', 'i.fa fa -cube'，'i.fa fa-anchor'，'i.fa fa-leaf'，'i.fa fa-bicycle'，'i.fa fa-diamond'，'i.fa fa-bomb'，' i.fa fa-leaf'，'i.fa fa-bomb'，'i.fa fa-bolt'，'i.fa fa-bicycle'，'i.fa fa-paper-plane-o'，'i .fa fa-cube'] @grazed101 你得到的是htmlElements，而不是字符串。 HTMLElement 具有 className 属性。您打算如何使用结果数组可能也很有趣。为什么需要一个类名数组？如果您想选择与这些类对应的元素，您已经使用现有代码解决了这个问题。 @Xufox 用于记忆游戏任务。我能够在 javascript 中创建一个运行良好的数组，但我想通过 DOM 来完成它。如果我用新卡片更新 HTML，那么数组将拾取任何创建和洗牌的新卡片。我对此还很陌生，所以还不是很聪明。 【参考方案1】：

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

const classes = Array.from(
  document.querySelectorAll('.deck i'),
  i => i.className
);
console.log(classes);
<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>

【讨论】：

【参考方案2】：

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

var obj = $('.card > .fa').map(function() 
  return $(this).attr('class');
).get();

console.log(obj);
<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>

【讨论】：

这正是我所需要的。我很感激。 乐于帮助@grazed101【参考方案3】： 

const arr = document.querySelectorAll('.deck  i');
const classArr = [...arr].map(ele => ele.className);
console.log(classArr);
<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>

【讨论】：

【参考方案4】：

也许您可以使用更简单的方法：

var arr=[];    
$('.fa').each(function()
     arr.push ($(this).attr('class'));
);
console.log (arr);
<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>

【讨论】：

好吧，他说：The issue I’m trying to solve is removing the i. from the fa fa- strings 我做到了。但是，是的，你是对的，我忘了把它变成一个数组。我现在改变了答案。

以上是关于修改用 jQuery 创建的数组的主要内容，如果未能解决你的问题，请参考以下文章

javascript 常见数组操作（ 1数组整体元素修改 2 数组筛选 3jquery 元素转数组 4获取两个数组中相同部分或者不同部分 5数组去重并倒序排序 6数组排序 7

用 JQuery 修改动画函数

jQuery 如何先创建再修改后添加DOM元素

怎么用jquery对动态加载的元素增加，或者修改元素样式

jquery插件怎样使用和修改?

关于用jQuery修改CSS样式的一点代码理解上的疑问