Изменить массив, созданный с помощью jQuery

Question

Я провел день, пытаясь разобраться в этой проблеме.Я могу создать массив из класса DOM достаточно просто.

Массив возвращает i.fa fa-diamond, i.fa fa-paper-plane и т. Д. Проблема, которую я пытаюсь решить, - это удаление i. из строк fa fa-,Я попробовал .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>

Answer 1

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>

Answer 2

Если вы хотите получить массив классов, вы можете использовать map и получить класс attr

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>

Answer 3

Может быть, вы могли бы использовать более простой подход:

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>

Answer 4

Нет необходимости в такой тяжелой библиотеке, как jQuery, просто выберите элементы и используйте от Array.from до map массива их className s:

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>