отобразить несколько элементов div в массив

Question

Столкнувшись с проблемой отображения, он возвращает мне пустой массив с двумя пустыми элементами. Имея кнопку, по нажатию на которую он получает связанный блок div, я пытаюсь получить тип и число и вывести их в массив. Что я здесь не так делаю?

<div class="chapter">
    <div class="span">
        <div class="contact">
            <span class="type">
                2
            </span>
            <span class="number">
                1111111111
            </span>
        </div>
        <div class="contact">
            <span class="type">
                4
            </span>
            <span class="number">
                33333333333
            </span>
        </div>
    </div>
</div>

function func(el) {
    let block = $(el).closest("div.chapter")
    let arr = $(block.find('.contact')).map(function () {
        let val = $(this).find('.type, .number').val();
        return val;
    }).get();

    console.log(arr) //result: ["", ""]
}

Answer 1

Ваш код не соответствует предоставленной вами разметке HTML. Вы можете просто l oop через все элементы с классом contact и найти элемент внутри с указанием c class to от объекта.

Обратите внимание: Элемент span не имеет свойства value, необходимо использовать .text().

function func() {
  let arr = $('.contact').map(function () {
    return  {
        type: +$(this).find('.type').text().trim(),   //find text and convert to number using +
        number: +$(this).find('.number').text().trim()//find text and convert to number using +
    }
  }).get();

  console.log(arr);
}
func();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="span">
    <div class="contact">
        <span class="type">
            2
        </span>
        <span class="number">
            1111111111
        </span>
    </div>
    <div class="contact">
        <span class="type">
            4
        </span>
        <span class="number">
            33333333333
        </span>
    </div>
</div>

Answer 2

Метод .val() в основном используется для получения значений элементов формы, таких как input, select и textarea. Для этого вам необходимо использовать метод text(), как строку text(), содержащую объединенный текст соответствующих элементов.

Использование .val() для span элемента:

console.log( $('.type').val() )
// Return empty string
console.log( typeof $('.type').val() )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="type">2</span>

Использование .text() на span элементе:

console.log( $('.type').text() )
// Returns '2'
console.log( typeof $('.type').text() )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="type">2</span>

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

let arr = block.find('.contact').map(function() {
   let type = $(this).find('.type').text().trim();;
   let number = $(this).find('.number').text().trim();;
   return { type, number};
}).get();

Это вернет вам массив объектов, где у каждого объекта есть текст содержание type & number элементов класса.

DEMO:

let arr = $('.span').find('.contact').map(function() {
   let type = $(this).find('.type').text().trim();
   let number = $(this).find('.number').text().trim();
   return { type, number};
}).get();

console.log( arr )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="span">
    <div class="contact">
        <span class="type">
            2
        </span>
        <span class="number">
            1111111111
        </span>
    </div>
    <div class="contact">
        <span class="type">
            4
        </span>
        <span class="number">
            33333333333
        </span>
    </div>
</div>

Answer 3

Вы можете использовать простые JavaScript это просто!

document.querySelectorAll(".contact").forEach((elm)=>{
        arr=[] ;
        arr.push(elm.children[0].innerText);
        arr.push(elm.children[1].innerText);

        console.log(arr)
    })