Reputation: 1797
I have a long list of items in a list item, which I need to go through and add a comma and space and display as a comma seperated string of items:
So i have the following:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>etc</li>
</ul>
Which I need to be display as the following:
Item 1, Item 2, Item 3, Item 4, etc
<p>Item 1, Item 2, Item 3, Item 4, etc</p>
I am new to javaScript so any help would be great.
Thank
Upvotes: 1
Views: 9931
Reputation: 9706
Simply get the collection of LIs, concatenate their texts, and insert into a P that you create and append to the BODY:
var items = document.getElementsByTagName('li'),
count = items.length,
para = document.createElement('p'),
str = items[0].innerHTML,
i;
for (i = 1; i < count; i += 1) {
str += ', ' + items[i].innerHTML;
}
para.innerHTML = str;
document.body.appendChild(para);
Edit: It's 2021, and there is a much better way to do this.
const items = document.querySelectorAll('li');
const stringifiedList = Array.from(items)
.map(item => item.textContent)
.join(', ');
const para = document.createElement('p');
para.textContent = stringifiedList;
document.body.appendChild(para);
Upvotes: 1
Reputation: 8171
You can easily get this using Jquery -
Html -
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>etc</li>
</ul>
<span id="lstItem"></span>
Jquery -
$(document).ready(function(){
var ListItem = "";
$('ul li').each(function(){
ListItem += $(this).text() + ", ";
});
$('#lstItem').text(ListItem.substring(0,(ListItem.length - 2)));
});
Solution with Javascript -
var listli = document.getElementsByTagName("li");
var lstItem = [];
for(var i=0; i<listli.length; i++){
lstItem.push(listli[i].innerHTML);
}
var showlist = document.getElementById("lstItem");
showlist.innerText = lstItem.join();
Upvotes: 1
Reputation: 12400
Using unique ID's in your code makes work like this much simpler.
<ul id="myUL">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>etc</li>
</ul>
<p id="myPara"></p>
The javascript would look like this
//Grab your ul element by id and then all the li tags within it.
var myArr = document.getElementById("myUL").getElementsByTagName("li");
//Grab your paragraph you wish to populate
var para = document.getElementById("myPara");
//Specify an output array
var output = [];
//Loop over your li's and grab the html content
for(var i=0; i<myArr.length; i++){
output.push(myArr[i].innerHTML);
}
//Set the paragraph value by joining the outputs together
para.innerHTML = output.join(", ");
Here is a working jsFiddle - http://jsfiddle.net/GBdTM/
Some useful references
Upvotes: 5
Reputation: 665574
No JavaScript needed here. Some CSS will do it as well, and keep the more semantic document structure:
ul {
display: block;
padding: 0;
}
li {
display: inline;
}
li:not(:last-child)::after {
content: ", ";
}
Upvotes: 2
Reputation: 161
Hope this small example will give you something to work of.
$(document).ready(function () {
var str = '';
$('li').each(function () {
str += $(this).text() + ', ';
});
//Remove the last two character
str = str.slice(0, -2);
//assign the string to the <p>
$('p').text(str);
});
Upvotes: 1
Reputation: 437904
You want to select the interesting elements, get their text and join the texts with the string ", "
as the delimiter.
Get the elements with document.querySelectorAll
:
var els = document.querySelectorAll("ul > li"); // ul > li is a "CSS selector"
Translate the collection of elements to a collection of their text by iterating over the returned NodeList
:
var text = [];
for (var i = 0; i < els.length; ++i) {
text.push(els[i].textContent);
}
Join them together with Array.join
:
var joined = text.join(", ");
A few caveats:
querySelectorAll
is not supported in IE < 8textContent
is not supported in IE < 9, but you can use innerText
for old IEUpvotes: 3