Próbuję pobrać dane z elementów div i wyprowadzić je oddzielone za pomocą , w ten sposób a, b Jak mogę to osiągnąć? W moim przykładzie tekst w wyniku p powinien wyglądać jak test, test222 dada

let desc = document.querySelectorAll(".desc");
let output = document.querySelectorAll(".output");
let items = [];

desc.forEach((item, i) => {
console.log(item.dataset.sentence);
output.textContent += item[i];
})
<div class="desc" data-sentence="test">

</div>

<div class="desc" data-sentence="test222 dada">

</div>

<p class="output">

</p>
1
squnk 24 styczeń 2022, 17:46

7 odpowiedzi

Najlepsza odpowiedź

Oto kolejne rozwiązanie demonstrujące użycie zaawansowanych funkcji składni ECMAScript, takich jak podwójna destrukturyzacja w sygnaturze funkcji, rozprzestrzenianie tablicy ([...iterable]) wraz z Array.prototype.map.

let desc = document.querySelectorAll(".desc");
let output = document.querySelector(".output");
output.textContent = [...desc].map(({dataset: { sentence } }) => sentence).join(', ');
<div class="desc" data-sentence="test"></div>
<div class="desc" data-sentence="test222 dada"></div>
<p class="output"></p>

Objaśnienia:

  1. [...desc] rozkłada NodeList, które masz w desc na tablicę, która pozwala na użycie metod Array, takich jak map i join.
  2. ({dataset: { sentence } }) destrukturyzuje obiekt przekazywany do iteratora mapy. Podpis zasadniczo mówi: „Oczekuję, że zostanie przekazany obiekt, który ma właściwość dataset, czyli obiekt, który ma właściwość sentence. Podaj mi, że sentence jako zmienną lokalną wewnątrz funkcja ciała."
3
connexo 24 styczeń 2022, 18:19
Plusy: czyste kody, minusy: pętla raz więcej tablicy.
 – 
ikhvjs
24 styczeń 2022, 18:40
Jasne, że możesz zaoszczędzić jedną iterację, używając reduce. Jednak zwykle nie brałbym pod uwagę optymalizacji zadań takich jak to.
 – 
connexo
24 styczeń 2022, 18:42
Czas, w którym używasz spreads, używasz już jednej pętli. Byłoby to to samo co reduce.
 – 
ikhvjs
24 styczeń 2022, 18:43
Mówiłem map i join.
 – 
connexo
24 styczeń 2022, 18:44
Widzę. Mówię o spread.
 – 
ikhvjs
24 styczeń 2022, 18:44

Oto, czego możesz spróbować:

  1. Zapisz swój tekst w tablicy

Sposób, w jaki otrzymujesz tekst za pomocą item.dataset.sentence, jest całkowicie w porządku, wystarczy umieścić je w tablicy, aby użyć później.

let text = [];
desc.forEach((item, i) => {
    text.push(item.dataset.sentence);
})
  1. Konwertuj tablicę na ciąg znaków za pomocą join()

text.join(',') => 'test,test222 dada'

  1. Zaktualizuj zawartość

document.querySelectorAll(".output") nie zadziała, ponieważ zwróci tablicę, musisz zmienić ją na document.querySelector(".output"), aby mieć element.

const desc = document.querySelectorAll(".desc");
const output = document.querySelector(".output");
const text = [];

desc.forEach(item => text.push(item.dataset.sentence));
output.textContent = text.join(',');
<div class="desc" data-sentence="test"></div>
<div class="desc" data-sentence="test222 dada"></div>
<p class="output"></p>
3
phucbm 24 styczeń 2022, 18:42

Prawie to kończysz, ale popełniasz błąd.

Po wybraniu wyjścia wystarczy użyć querySelector zamiast querySelectorAll.

let desc = document.querySelectorAll(".desc");
let output = document.querySelector(".output");
const data = [];

desc.forEach((item) => {
    data.push(item.dataset.sentence);
});

output.textContent = data.join(",");
<div class="desc" data-sentence="test">

</div>

<div class="desc" data-sentence="test222 dada">

</div>

<p class="output">

</p>
1
ikhvjs 24 styczeń 2022, 18:00

Możesz użyć funkcji join(), tworząc z niej tablicę. łańcuchy, które chcesz połączyć i używając argumentu separatora w ten sposób

const output = ['a','b'].join(','); //output = "a,b"
0
Will Evers 24 styczeń 2022, 17:50

Byłeś blisko. Pobrałeś wszystkie elementy z klasą output. Dlatego powinieneś połączyć tekst z pierwszym pasującym elementem. Zamiast output.textContent należy dodać output[0].textContent. Ponadto, jeśli element nie jest ostatnim elementem, dodaj , do wyniku.

let desc = document.querySelectorAll(".desc");
let output = document.querySelectorAll(".output");
let items = [];

desc.forEach((item, i, arr) => {
  output[0].textContent += item.dataset.sentence;
  if (i < arr.length - 1) output[0].textContent += ', '
})
<div class="desc" data-sentence="test">

</div>

<div class="desc" data-sentence="test222 dada">

</div>

<p class="output">

</p>
0
NeNaD 24 styczeń 2022, 17:55
let desc = document.querySelectorAll(".desc");
let output = document.getElementById("output");
let items = [];

desc.forEach((item, i) => {
  items[i] = item.dataset.sentence
})

output.appendChild(document.createTextNode(items.join()));
<p id='output'> Output </p>


<div class="desc" data-sentence="a-teste">

</div>

<div class="desc" data-sentence="b-testes c-testes">

</div>

Spróbuj tego, ale przeczytaj ten przewodnik.

https://css-tricks.com/a-complete-guide-to-data-attributes/

Czego nie robić z atrybutami danych Przechowuj zawartość, która powinna być dostępna. Jeśli treść powinna być widoczna lub odczytana na stronie, nie tylko umieszczaj ją w atrybutach danych, ale upewnij się, że treść znajduje się gdzieś w treści HTML.

Przeczytaj o funkcji querySelectorAll

https://developer.mozilla.org/en-us/docs/web/api/document/queryselectorall.

Ponieważ na wyjściu (niech) otrzymasz NodeList

0
Alfredo Osorio 24 styczeń 2022, 18:20
    
      let desc = document.querySelectorAll(".desc")
      let output = document.querySelector(".output")
      let item = []
      desc.forEach((elem)=>{
          item.push(elem.dataset.sentence)//push each data sentence into array
      })
     var Mystring = ""  //start with empty string
      k = 0
     while(k<item.length-1){
       //concatenate empty string with first element and then the result with  
       //"," and the next till the last but one element
       Mystring = Mystring.concat(item[k]).concat(", ")
       k = k + 1
     }
    //concatenate result to last element
     data = Mystring.concat(item[item.length-1])
  
     output.textContent = data
    
<div class="desc" data-sentence="test">

</div>

<div class="desc" data-sentence="test222 dada">

</div>

<p class="output">

</p>
0
Ngu Alpha 24 styczeń 2022, 19:00
Twoja odpowiedź może zostać ulepszona dzięki dodatkowym informacjom pomocniczym. Edytuj, aby dodać dalsze szczegóły, takie jak cytaty lub dokumentacja, aby inni mogli potwierdzić, że Twoja odpowiedź jest poprawna. Więcej informacji na temat pisania dobrych odpowiedzi znajdziesz w centrum pomocy.
 – 
Community
24 styczeń 2022, 18:56
Ten fragment dotyczy ogólnego przypadku, w którym możesz mieć nawet k elementów z tą samą klasą i chcesz połączyć ich dane.
 – 
Ngu Alpha
24 styczeń 2022, 18:58