修改用 jQuery 创建的数组答案

【问题标题】：Modify array created with jQuery修改用 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，那么数组将拾取任何创建和洗牌的新卡片。我对此还很陌生，所以还不是很聪明。

标签： javascript jquery arrays string split

【解决方案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 我做到了。但是，是的，你是对的，我忘了把它变成一个数组。我现在改变了答案。