<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem13</li>
</ul>
I have something like this on HTML file. So how can I get that each list item in my jQuery file as array
like this
var asmg = ["listitem1","listitem2","listitem3"];
use the jQuery.map() and .get() to process a plain array.
var asmg = $( "li" )
.map(function() {
return $(this).text();
}).get();
console.log(asmg);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem13</li>
</ul>
try with foreach loop :
function getArray(ul){
asmg = [];
ul.find('li').each(function(){
asmg.push($(this).text());
});
return asmg;
}
console.log(getArray($('ul')));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem13</li>
</ul>
Try following
$(function(){
var asmg = [];
$("ul > li").each(function(i, li){
asmg.push($(li).text());
});
console.log(asmg);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem13</li>
</ul>
You can use vanilla JavaScript to achieve this:
Select all the li elements
document.querySelectorAll('li')
unpack them in an array
[...document.querySelectorAll('li')]
map this array to get the text content of each li item.
[...document.querySelectorAll('li')].map(e => e.textContent)
Here is the code:
const li = [...document.querySelectorAll('li')].map(e => e.textContent)
console.log(li)
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem13</li>
</ul>
var asmg = Array.from(document.querySelectorAll('li')).map(e => e.textContent);
var asmg = Array.from(document.querySelectorAll('li')).map(e => e.textContent);
console.log(asmg);
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem3</li>
</ul>
var varObject = $('ul li').map(function(){
return $(this).text();
}).get();
//converting to array
var aiMsg = $.makeArray(varObject);
this code works for me.
thanks for all the answer
Related
I've a several li elements which have as class : multiselect_selected_profil.
<li id="li60" class="multiselect_my_profil multiselect_selected_profil" data-id="60">
<span class="multiselect_profil">C1</span>
</li>
I would like that for each li that has this specific class, I get its data-id and then put it into an array. At then end of the process I would like to have an array which contains all the ids.
Here is what I've tried :
$(".multiselect_selected_profil").each(function(){
var iObjetId = $(this).attr('data-id');
// ???
}
var ids = []
$(".multiselect_selected_profil").each(function(){
var iObjetId = $(this).attr('data-id');
ids.push(iObjetId);
}
Create an empty array and push ids
You can use map() to create an array from a set of matched elements:
var arr = $(".multiselect_selected_profil").map(function() {
return $(this).data('id');
}).get()
Have a look attached snippet.
var dataid = []; //Initialize the array variable
$(".multiselect_selected_profil").each(function(){
var iObjetId = $(this).attr('data-id');
dataid.push(iObjetId);
});
alert(dataid);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="li60" class="multiselect_my_profil multiselect_selected_profil" data-id="60"><span class="multiselect_profil">C1</span></li>
<li id="li60" class="multiselect_my_profil multiselect_selected_profil" data-id="61"><span class="multiselect_profil">C2</span></li>
<li id="li60" class="multiselect_my_profil multiselect_selected_profil" data-id="62"><span class="multiselect_profil">C3</span></li>
<li id="li60" class="multiselect_my_profil multiselect_selected_profil" data-id="63"><span class="multiselect_profil">C4</span></li>
<li id="li60" class="multiselect_my_profil multiselect_selected_profil" data-id="64"><span class="multiselect_profil">C5</span></li>
var ids = [];
$(".multiselect_selected_profil").each(function(){
if($(this)..hasClass( "specific_class_name" )){
ids.push($(this).attr('data-id'));
}
});
now you will get all ids those contains specific class
The fastest way would be specifying the data-id right in the selector description and use toArray() function to retrieve all the elements contained in the jQuery set, as an array:
var arr = $(".multiselect_selected_profil[data-id]").toArray();
I want to retrive all the objects with one datakey and multiple values, for QuickSand:
<ul>
<li data-company="Microsoft">Steve</li>
<li data-company="Google">Jobs</li>
<li data-company ="Facebook">Michael</li>
<li data-company ="Google">Richard</li>
<li data-company ="Facebook">Tim</li>
</ul>
How can i retreve all the li items with data-company Microsoft and Google (these two values are in a array) like this:
var itemes = $('ul').find('li[data-comapany={"Microsoft","Google"}]');
Thank you.
you could create an array of the required companies, and check for each li if the data is contained in that array:
var companies = ["Microsoft", "Google"];
$(function() {
var items = $('ul li').filter(function() {
return $.inArray($(this).data("company"), companies) > -1;
});
items.css({
"position": "relative",
"margin-left": "25px"
});
console.log(items);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-company="Microsoft">Steve</li>
<li data-company="Google">Jobs</li>
<li data-company="Facebook">Michael</li>
<li data-company="Google">Richard</li>
<li data-company="Facebook">Tim</li>
</ul>
You could filter it:
var itemes = $('ul').find('li').filter(function(){
return $(this).data('company').match(/Microsoft|Google/);
});
-DEMO-
To handle case for LI without any data-company set, you should use:
var itemes = $('ul').find('li').filter(function(){
var data = $(this).data('company');
return data ? data.match(/Microsoft|Google/) : null;
});
You can also combine selectors:
var items = $("[data-company*='Microsoft'], [data-company*='Google']");
jsFiddle
You could do it like this:
var companies = ['Google', 'Microsoft', 'Waffle House'];
companies.forEach(function(company, index) {
companies[index] = "li[data-company='" + company + "']";
});
$('ul').find(companies.join(',')).css('background', 'red');
How can i get id of list item onclick of anchor. I want to display id of list item via Javascript alert. Here is my source:
Since you use jquery, use parent() and attr() functions:
function myClickFunction(){
var id = $(this).parent().attr("id");
};
You can use .parent() and .attr() or [0].id as follows:
$('.child').on('click', function() {
var id = $(this).parent()[0].id; //or $(this).parent().attr('id');
});
You would do well not to use inline JS.
$(function() {
$('ul a').on('click', function() {
var id = $(this).parent()[0].id; //or $(this).parent().attr('id');
alert( id );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="li1"><a>Click1</a></li>
<li id="li2"><a>Click2</a></li>
<li id="li3"><a>Click3</a></li>
</ul>
Use some thing like this ..
<script>
function myClickFunction(a){
var id = a.parentNode.id;
alert("I just clicked list item: " + id);
};
</script>
</head>
<body>
<ul>
<li id=li1"><a onClick="myClickFunction(this);">Click1</a></li>
<li id=li2"><a onClick="myClickFunction(this);">Click2</a></li>
<li id=li3"><a onClick="myClickFunction(this);">Click3</a></li>
</ul>
</body>
</html>
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;
i have a question for you...
for the first lets say i have a variable on javascript like this..
var string = 'a,b,c';
var exploded = string.split(',');
and then i have a html element like this
<ul id='myTags'>
</ul>
and my question is.. how to create / append to inside of my " ul id='myTags' " so it will be like this...
<ul id='myTags'>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
$('#myTags').append('<li>'+ exploded.join('</li><li>') +'</li>');
var stringLI = "";
for (i=0;i<exploded.length;i++) {
stringLI += "<li>"+exploded[i]+"</li>";
}
$("#myTags").append(stringLI);
Best way would be to only append once:
Jquery
var string = 'a,b,c';
var exploded = string.split(',');
var items = [];
$.each(exploded, function() {
items.push('<li>'+this+'</li>');
});
$('#myTags').append( items.join('') );