Удалить постоянную запятую в array.join после array.slice - PullRequest
Новая
       10

Удалить постоянную запятую в array.join после array.slice

0 голосов
/ 11 октября 2019

Я создаю новый массив элементов HTML после итерации по каждому элементу, а затем помещаю их в новый массив. Затем я пытаюсь нарезать массив (который работает, но вставляет запятую после каждого элемента). Затем я использую .join для удаления запятой, но это не так, почему? 

var shortReviews = [];
var elm = document.getElementsByClassName('reviewContainer');
for (var i = 0; i < elm.length; i++) {
shortReviews.push(elm[i].innerHTML);
}

var snappy = document.querySelector("#reviewsSnap").innerHTML = shortReviews.slice(0, 2);
snappy.join('');

Если я вызываю 'snappy' в консоли, я получаю массив, разделенный запятыми (,), но когда я использую snappy. join ('') Я получаю желаемый вывод без запятых в консоли, но на страницах вывода запятые сохраняются. Чего мне не хватает, чтобы удалить запятые из snappy.join ('') и вывести их без разделителей запятых?

Ответы [ 2 ]

1 голос
/ 11 октября 2019

Вместо работы с HTML, рассмотрите возможность манипулирования узлами DOM. Это более чистое и надежное решение, поскольку HTML может быть сложным в управлении. Вот как вы можете сделать это, используя DOM API для клонирования узлов и добавления их к новому родительскому элементу: 

var shortReviews = [];
var elm = document.getElementsByClassName('reviewContainer');
for (var i = 0; i < elm.length; i++) {
  //create a copy of the nodes
  shortReviews.push(elm[i].cloneNode(true));
}

var newContainer = document.querySelector("#reviewsSnap");
shortReviews
  .slice(0, 2) //take the first two
  .forEach(el => newContainer.appendChild(el)); //add them to the new container
.reviewContainer {
  border: 1px solid red;
}

#reviewsSnap .reviewContainer {
  border: 1px solid blue;
}
<div class="reviewContainer">
  <h3>short review 1</h3>
  <p>very short review: good</p>
</div>
<div class="reviewContainer">
  <h3>short review 2</h3>
  <p>very short review: average</p>
</div>
<div class="reviewContainer">
  <h3>short review 3</h3>
  <p>very short review: bad</p>
</div>

<div id="reviewsSnap">
  <h1>Chosen reviews</h1>
</div>

Если вы хотите переместить узлы, вместо двух копий, вы можете просто отбросить шаг клонирования,Каждый узел может иметь только одного родителя, поэтому, если вы добавите его в новый, он будет удален из первого родителя: 

var shortReviews = [];
var elm = document.getElementsByClassName('reviewContainer');
for (var i = 0; i < elm.length; i++) {
  //don't copy, take the actual nodes
  shortReviews.push(elm[i]);
}

var newContainer = document.querySelector("#reviewsSnap");
shortReviews
  .slice(0, 2) //take the first two
  .forEach(el => newContainer.appendChild(el)); //add them to the new container
.reviewContainer {
  border: 1px solid red;
}

#reviewsSnap .reviewContainer {
  border: 1px solid blue;
}
<div class="reviewContainer">
  <h3>short review 1</h3>
  <p>very short review: good</p>
</div>
<div class="reviewContainer">
  <h3>short review 2</h3>
  <p>very short review: average</p>
</div>
<div class="reviewContainer">
  <h3>short review 3</h3>
  <p>very short review: bad</p>
</div>

<div id="reviewsSnap">
  <h1>Chosen reviews</h1>
</div>
1 голос
/ 11 октября 2019

Просто соедините join() с нарезанным массивом: 

document.querySelector("#reviewsSnap").innerHTML = shortReviews.slice(0, 2).join('')
...