JQuery конвертирует идентификаторы элементов в строку, разделенную запятыми

У меня есть простой скрипт html и jquery, как показано ниже, я пытаюсь получить разделенный запятыми список идентификаторов элементов данных, поэтому он будет выглядеть так...

1,2,3,4,5

var items = $('.container').children();
console.info(items);

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

<div class = "container">
  <div class = "item" data-item-id = "1">Item 1</div>
  <div class = "item" data-item-id = "2">Item 2</div>
  <div class = "item" data-item-id = "3">Item 3</div>
  <div class = "item" data-item-id = "4">Item 4</div>
  <div class = "item" data-item-id = "5">Item 5</div>
</div>

Я схватил элементы, но как я могу преобразовать это в строку, разделенную запятыми?

javascript jquery

28.05.2019 06:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Сопоставьте каждый элемент с его item-id, затем соедините запятыми:

var items = $('.container')
  .children()
  .map(function() { return $(this).data('item-id') })
  .get()
  .join(',');
console.info(items);

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

<div class = "container">
  <div class = "item" data-item-id = "1">Item 1</div>
  <div class = "item" data-item-id = "2">Item 2</div>
  <div class = "item" data-item-id = "3">Item 3</div>
  <div class = "item" data-item-id = "4">Item 4</div>
  <div class = "item" data-item-id = "5">Item 5</div>
</div>

Но нет необходимости в большой библиотеке, такой как jQuery, для выполнения такой тривиальной задачи, если вы хотите:

const items = Array.from(
  document.querySelectorAll('.container > .item'),
  div => div.dataset.itemId
)
  .join(',');
console.info(items);

<div class = "container">
  <div class = "item" data-item-id = "1">Item 1</div>
  <div class = "item" data-item-id = "2">Item 2</div>
  <div class = "item" data-item-id = "3">Item 3</div>
  <div class = "item" data-item-id = "4">Item 4</div>
  <div class = "item" data-item-id = "5">Item 5</div>
</div>

28.05.2019 06:02

Другой альтернативой JQuery может быть использование .каждый() для обхода items при захвате data-item-id с помощью .данные() и добавлении его в строку.

$(document).ready(function()
{
    var itemList = "";

    $('.container .item').each(function()
    {
        itemList += $(this).data('item-id') + ",";
    });

    console.info("Ids:", itemList.slice(0,-1));
});

.as-console {background-color:black !important; color:lime;}

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

<div class = "container">
  <div class = "item" data-item-id = "1">Item 1</div>
  <div class = "item" data-item-id = "2">Item 2</div>
  <div class = "item" data-item-id = "3">Item 3</div>
  <div class = "item" data-item-id = "4">Item 4</div>
  <div class = "item" data-item-id = "5">Item 5</div>
</div>

28.05.2019 06:18

Потому что кто бы не хотел добавить еще и деструктуризацию..... (престижность CertainPerformance)

const items = Array.from(
  document.querySelectorAll('.container > .item'),
  ({ dataset: { itemId: i } }) => i
)
  .join(',');
console.info(items);

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

<div class = "container">
  <div class = "item" data-item-id = "1">Item 1</div>
  <div class = "item" data-item-id = "2">Item 2</div>
  <div class = "item" data-item-id = "3">Item 3</div>
  <div class = "item" data-item-id = "4">Item 4</div>
  <div class = "item" data-item-id = "5">Item 5</div>
</div>

28.05.2019 06:20

Вы также можете применить некоторые функции ES5 и ES6 для более короткого решения. И без jQuery.

let itemsIds = [...document.getElementsByClassName("item")]
    .map(elem => elem.getAttribute("data-item-id"))
    .join(',');
console.info(itemsIds);

<div class = "container">
  <div class = "item" data-item-id = "1">Item 1</div>
  <div class = "item" data-item-id = "2">Item 2</div>
  <div class = "item" data-item-id = "3">Item 3</div>
  <div class = "item" data-item-id = "4">Item 4</div>
  <div class = "item" data-item-id = "5">Item 5</div>
</div>

28.05.2019 06:34

Другие вопросы по теме

Выполнение синхронного вызова API в javascript

Элегантный способ переключения назад и принудительного включения нескольких элементов css

Apexcharts удаляет старые ряды данных перед отображением новых рядов

Появляется ошибка, связанная с JS для кнопки переключения

Значение Select-Option вставляется как «0» в базу данных вместо фактического значения

Как добавить тег скрипта/JS в текстовую область в виде текста (не исполняемый)

$(document).ajaxError не срабатывает на 401

Как сделать оператор if, чтобы отключить опцию выбора?

Есть ли функция для преобразования текста шестнадцатеричного цветового кода в квадрат в CSS с этим цветом?

Как запомнить значение ввода с помощью локального хранилища?

JQuery конвертирует идентификаторы элементов в строку, разделенную запятыми

Ответы 4

Вы также можете применить некоторые функции ES5 и ES6 для более короткого решения. И без jQuery.

Другие вопросы по теме

Похожие вопросы