Develop Reference

Get attribute of all list items and add them to input

I have a list like this:
<ul class="draggable">
<li data-bullet="1"> item 1</li>
<li data-bullet="2"> item 2</li>
<li data-bullet="3"> item 3</li>
</ul>
Using javascript, how do I grab all the list item attributes data-bullet and insert them into the value of an input (separated by a comma):
<input id="insertme" type="hidden" name="bullet" value="">
So the end result will be:
<input id="insertme" type="hidden" name="bullet" value="1,2,3">
I know how to get individual list items but can't get my head around how to get them all and insert them there.

Here you go, A pure javascript solution
Try to use dataset at this context,
var res = "";
[].forEach.bind(document.querySelectorAll(
'.draggable > li[data-bullet]'),function(itm, i){
res += ((i) ? ":" : "") + itm.dataset.bullet;
})();
document.getElementById("insertme").value = res;
DEMO
Or the less complex and a readable version would be,
var elemArray = Array.from(document.querySelectorAll('.draggable > li[data-bullet]')),
res ="";
elemArray.forEach(function(){
res += ((i) ? ":" : "") + itm.dataset.bullet;
});
document.getElementById("insertme").value = res;
As per your new requirement, you can accomplish your task by,
$("button").click(function() {
var parent = $(this).parent();
parent.closest(".draggable").next(":text").val(parent.siblings("li").addBack().map(function(){
return $(this).data("bullet")
}).get().join(":"));
});
DEMO

try
var allBullets = [];
$(".draggable li").each(function(){
allBullets.push($(this).attr("data-bullet"));
});
$("#insertme").val(allBullets.join(","));

If you can use querySelectorAll to find elements and then map it using getAttribute method. For example (ES6 syntax):
const items = document.querySelectorAll('.draggable li');
const result = [...items].map(el => el.getAttribute('data-bullet')).join();
document.getElementById('insertme').value = result;
ES5 analogy:
var items = document.querySelectorAll('.draggable li');
var result = [].slice.call(items).map(function(el) {
return el.getAttribute('data-bullet');
}).join();
document.getElementById('insertme').value = result;

Fetch html content of child tag inside li

I have a list like:
<ol id="id1">
<li><strong>aaa</strong><em>bbb<br />ccc</em></li>
<li><strong>111</strong><em>222<br />333</em></li>
</ol>
How do I get the html content of <em> tag within each <li> ?
I tried using jQuery's .html() method but is behaving inconsistently on android html5 app I'm trying to make. Android 5.1 above are able to read that well, but android 4.4.2 device doesn't doesn't display anything.
Is there an alternate way of getting html please?
Thanks!

var liElements = document.getElementById("id1").getElementsByTagName("li");
for(var i=0;i<liElements.length;i++){
alert(liElements[i].getElementsByTagName("em")[0].innerHTML);
}

$('li').each(function(){
alert($(this).find('em').html());
});
or
$('li em').each(function(){
alert($(this).html());
});
Using innerHTML:
var items = document.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
alert(items[i].getElementsByTagName("em")[0].innerHTML);
}

This code will give you what you are looking for:
var insideEM = $("li").children("em").html();
Answer will be : 222<br />333

You could get all em elements like this and then iterate over them.
$(function(){
$("ol li > em").each(function(index, element){
var em = $(element).html();
alert(em);
});
});
$(function(){
$("ol li > em").each(function(index, element){
var em = $(element).html();
alert(em);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ol id="id1">
<li><strong>aaa</strong><em>bbb<br />ccc</em></li>
<li><strong>111</strong><em>222<br />333</em></li>
</ol>

This is the most human aproach i think for vanilla js of course:
var $list = document.querySelectorAll("#id1 li em");
document.write("<br />");
for (i = 0; i < $list.length; i++) {
document.write((i+1) + " match: <br />");
document.write($list[i].innerHTML);
document.write("<br />");
}
<ol id="id1">
<li><strong>aaa</strong><em>bbb<br />ccc</em></li>
<li><strong>111</strong><em>222<br />333</em></li>
</ol>

Adding extra values to JS Object

Ok I have an HTML list containing the data I need.
It looks like this
ul
li[data-trainer]>trainee
li[data-trainer]>trainee
li[data-trainer]>trainee
I iterate it and want to make an object that looks like this
{
"Trainer":{0:Trainee1},
"Trainer2":{1:Trainee2,2:Trainee3,3:Trainee4}
}
I tried this and a bunch more
var Data = new Object();
var i = 0;
$(".blah-blah-ul li.active").each(function(){
i++;
var trainer = $(this).attr("data-trainer");
var trainee = $(this).text();
Data[trainer] = {};
Data[trainer][i] = trainee;
})
console.log(Data);
Data[trainer][i] = trainee leaves me with only the last trainee in the list.
Data from console.log:
Object
Trainer1: Object
2: Trainee2
Trainer3: Object
4: Trainee6
I tried making an array and using push or making a string but that didn't work.
If someone could please recommend a proper solution, it would be greatly appreciated.
Here's the HTML
<ul class="blah-blah-ul">
<li class="active" data-trainer="Trainer1">Trainee1</li>
<li class="active" data-trainer="Trainer1">Trainee2</li>
<li data-trainer="Trainer2">Trainee3</li>
<li data-trainer="Trainer2">Trainee4</li>
<li class="active" data-trainer="Trainer3">Trainee5</li>
<li class="active" data-trainer="Trainer3">Trainee6</li>
</ul>

Your problem was in order to have more than one value assigned to the element in the array, the sub element must be an array. This allows for adding multiple Trainee to the Trainer item in the Data object.
var Data = new Object();
var i = 0;
$(".blah-blah-ul li.active").each(function(){
i++;
var trainer = $(this).attr("data-trainer");
var trainee = $(this).text();
if(typeof Data[trainer] === 'undefined') {
Data[trainer] = {};
}
Data[trainer][i] = {trainee};
})
console.log(Data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="blah-blah-ul">
<li class="active" data-trainer="Trainer1">Trainee1</li>
<li class="active" data-trainer="Trainer1">Trainee2</li>
<li data-trainer="Trainer2">Trainee3</li>
<li data-trainer="Trainer2">Trainee4</li>
<li class="active" data-trainer="Trainer3">Trainee5</li>
<li class="active" data-trainer="Trainer3">Trainee6</li>
</ul>
Documentation on Javascript Arrays using Push, can be found here w3schools

var Data = {};
var i = 0;
$(".blah-blah-ul li.active").each(function(){
i++;
var trainer = $(this).attr("data-trainer");
var trainee = $(this).text();
Data[trainer] = {};
Data[trainer][i] = trainee;
})
console.log(Data);

Try the following approach:
Data[trainer][i] = trainee;
and you can find more info here:
How can I add a key/value pair to a JavaScript object?

How to merge <ol> tag using javascript?

How to merge these two <ol> tags using javascript ?
Here is my code:
<ol id="myList1">
<li>Apple</li>
<li>Pear</li>
<li>Peach</li>
</ol>
<ol id="myList2">
<li>Orange</li>
</ol>
Output:
<ol id="myList1">
<li>Apple</li>
<li>Pear</li>
<li>Peach</li>
<li>Orange</li>
</ol>
Thanks in advance.

Vanilla JS variant:
var list1 = document.getElementById('myList1'),
list2 = document.getElementById('myList2'),
children = list2.childNodes // select all children nodes from one element
i, item;
// Add each children to list1
for (i = 0; item = children[i]; i++) {
list1.appendChild(item);
}
// Remove list2 DOMElement
list2.parentNode.removeChild(list2);

(function(){
var otherLis = $("#myList2").find("li").detach(); // this will detach li's from second OL
$("#myList1").append(otherLis); // this will appeend them to first OL
}())
DEMO

While not that elegant, there's a simple solution in pure JS:
document.getElementById("myList1").innerHTML += document.getElementById("myList2").innerHTML;
document.getElementById("myList2").remove();
It just takes adds the contents of myList2 to myList1 and removes myList2: not too much to explain there.
Demo

Try This:
document.querySelector('#myList1').appendChild(document.querySelector("#myList2>li"));
Fiddle

Try this in pure javascript:
var a = document.getElementById('myList1');
var b = document.getElementById('myList2');
a.innerHTML = a.innerHTML + b.innerHTML;
b.remove();
First get the list elements of both lists and then concatenate, and then add to the new list;

Generate an array from unordered list in HTML using Java Script [duplicate]

This question already has answers here:
How to get all of the IDs with jQuery?
(9 answers)
Closed 9 years ago.
With the help of xml and PHP, I create a list in html code
HTML code is like this
<ul id="msglst">
<li> <div id="10"> … </div></li>
<li><div id="25"> … </div></li>
<li><div id="116"> … </div> </li>
<li><div id="255">…</div></li>
<li> <div id="319"> … </div></li>
<li><div id="625">…</div> </li>
</ul>
I want to get an array that store id of div tag under ul tag
In this picture , i described required array
visit http://prntscr.com/2l7sez

This should work, IE8 and up. jsFiddle.
var elements = document.querySelectorAll('#msglst > li > div'),
idList = [];
for(var i=0;i<elements.length;i++) {
idList.push(+elements[i].getAttribute('id'));
}
alert(JSON.stringify(idList));

do you mean something like:
var ulEle = document.getElementById("msglst"),
liEle = ulEle.getElementsByTagName("li"),
arr = [];
for(var li = 0, len = liEle.length; li < len; li++) {
var divEle = liEle[li].getElementsByTagName("div");
for(var d = 0, dlen = divEle.length; d < dlen; d++) {
arr.push(divEle[d].getAttribute("id"));
}
}
console.log(arr);
Demo:: jsFiddle

In case you are using jQuery you can do it like this:
var array = $('#msglst').find('div').map(function() {
return $(this).attr('id');
}).toArray();
Demo
Edit
It will also work if you replace $('#msglst').find('div') with $('#msglst div')

arr=[];
$("msglst>li>div").each(function(ele){
arr.push(ele.id)
})