Добавление элементов в массив - отдельно

Question

Цель: нажмите кнопку и добавьте ингредиенты в массив в виде отдельных элементов.

Текущая настройка:

    <% currentUser.ingredients.forEach(function(items){ %> 
   <p class='ingredients'>  <%= items %> </p>
    <% }) %>

Это дает: черничный манго и лимонный сок

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

var allIngredients = []

$("#makeList").click(function() {

allIngredients.push($(".ingredients").text())
console.log(allIngredients)

}); 

Это печатные издания ["Чернично-манговый лимонный сок"]

Проблема в том, что это все один предмет, а не отдельные предметы

Что мне нужно изменить, чтобы сделать их отдельными предметами?

Answer 1

Вам нужно перебрать $('.ingredients')

var allIngredients = [];

$("#makeList").click(function() {

    $(".ingredients").each(function() {
        allIngredients.push($(this).text());
    });

    console.log(allIngredients);

}); 

Answer 2

Простое разбиение или зацикливание на текстовых узлах не даст ожидаемого результата, если значение может быть многословным.Для надежного решения заключите отображаемые значения в некоторый HTML-тег

<% currentUser.ingredients.forEach(function(items){ %> 
   <p class='ingredients'>  <span class="ingredient"><%= items %></span> </p>
<% }) %>

var allIngredients = []

$("#makeList").click(function() {

    $(".ingredients").find('.ingredient').each(function() {
        allIngredients.push($(this).text());
    });
    console.log(allIngredients)

});