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>7 odpowiedzi
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:
[...desc]rozkładaNodeList, które masz wdescna tablicę, która pozwala na użycie metod Array, takich jakmapijoin.({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, żesentencejako zmienną lokalną wewnątrz funkcja ciała."
Oto, czego możesz spróbować:
- 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);
})
- Konwertuj tablicę na ciąg znaków za pomocą
join()
text.join(',') => 'test,test222 dada'
- 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>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>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"
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>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
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>
reduce. Jednak zwykle nie brałbym pod uwagę optymalizacji zadań takich jak to.spreads, używasz już jednej pętli. Byłoby to to samo coreduce.mapijoin.spread.