I would like know how can i get the values ID of 3 element parent when i click on the children elements, and put them inside an array.
<div class="selected" id="1">
<div>Click</divi>
</div>
<div class="selected" id="2">
<div>Click</div>
</div>
<div class="selected" id="3">
<div>Click</div>
</div>
<script>
$('li').click(function(){
/// ???
});
</script>
To get all ids :
var ids = $('.selected').map(function(){ return this.id }).get();
This would build this array :
["1", "2", "3"]
To get the id of the parent of the clicked element:
<div class="selected" id="1">
<ul><li>Click</li></ul>
</div>
<div class="selected" id="2">
<ul><li>Click</li></ul>
</div>
<div class="selected" id="3">
<ul><li>Click</li></ul>
</div>
<script>
$('li').click(function(){
console.log($(this).closest('[id]').attr('id'));
});
</script>
I'm not sure if it's important for you, as your HTML was obviously written for this question, but a li element can't have a div element as parent. This invalid HTML is enough to prevent the real "parent" to be the div.
Demonstration
try this
$(document).ready(function () {
$('li').click(function () {
var IDArray = new Array();
$('.selected').each(function (Mindex, Mval) {
IDArray.push($(Mval).attr('id'));
});
});
});
try this:
var arry = new Array();
$(".selected").each(function(){
arry.push(this.id);
});
You can try this
$('li').click(function(){
var ary = new Array();
$("div.selected").each(function(){
ary.push(this.id);
});
});
Related
i have the following html example
<div class="list">
<div class="Teamlist">
<div class="Teamcontainer OPEN" dataid="73592"><div>
</div>
</div>
i am trying to get the dataid from teamcontainer but it keeps on returning undefined.This is what i tried
if ($this.hasClass("list") && $this.hasClass("Teamlist") && $this.hasClass("Teamcontainer")) {
var ID = $this.parents(".Teamcontainer").attr("dataid");
}
the above id just returns undefined. how do i get ID=73592? what am i doing wrong
Just use jquery selector like this:
var ID = $(".list .Teamlist .Teamcontainer").attr("dataid");
I hope it helps.
you can do it in 2 ways. first using attr as Michal answered above and 2nd if you change your dataid to data-id,, here are both the examples.
$(document).ready(function(){
//first way by Attr
var dataID = $(".list .Teamlist .Teamcontainer").attr("dataid");
console.log(dataID);
// second using data, but for this you need to change your attribut to data-id
var dataId = $(".list .Teamlist .Teamcontainer.OPEN").data("id");
console.log(dataId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div class="Teamlist">
<div class="Teamcontainer" dataid="73592"><div>
</div>
</div>
<div class="list">
<div class="Teamlist">
<div class="Teamcontainer OPEN" data-id="73592"><div>
</div>
</div>
I'm new to jQuery selectors. How can I extract the values from an attribute?
Given:
<div class='container'>
<div class='entry' data-name='foo'></div>
<div class='entry' data-name='bar'></div>
<div class='entry' data-name='baz'></div>
</div>
I'd want to extract:
['foo','bar','baz']
You can use .map() to create an array from a set of dom elements like
var array = $('.container .entry').map(function () {
return $(this).data('name')
}).get();
try this
$(function () {
var array = [];
$(".entry").each(function () {
array.push($(this).data("name"));
});
console.log(array);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='entry' data-name='foo'></div>
<div class='entry' data-name='bar'></div>
<div class='entry' data-name='baz'></div>
</div>
Try
var name = [];
$('div.container').children().map(function() {
name.push($(this).data('name'));
});
Working DEMO
Based on the DOM tree below, I want to get all of the <p> element that are the child of every div with message as its class and put them all in an array. This will create an array of objects.
Note : ul and all of its children in all levels can be added dynamically to the dom at any given time.
How do I do that?
I have tried
var messages = $('.rightP').find('li>.message>p');
$.each(messages,function(){
console.log(this);
});
but no luck
DOM tree
<ul class="rightP">
<li>
<div class="sender">
<p>David</p>
</div>
<div class="message">
<p>Hello</p>
</div>
</li>
<li>
<div class="sender">
<p>Watson</p>
</div>
<div class="message">
<p>yes anything?</p>
</div>
<div class="message">
....
</li>
...
</ul>
You used wrong jQuery selector. Replace $('.rightP').('li>.message>p') with $('.message > p') or you could do it this way.
var messages = jQuery('.message > p');
jQuery.each(messages, function (index, elem) {
var message = jQuery(elem);
console.log(message.text())
});
Here's the working fiddle.
$('.rightP').('li>.message>p');
Wrong statement. You should try
$('.rightP').find('li>.message>p');
etc...
You can get all those like bellow
var messages = $('.rightP').find('li>.message>p');
$.each(messages,function(){
console.log(this);
});
I'm trying to clone an existing object and wrapping it to an <li> and then grabbing value property of that checkbox and converting it into a string.
Unfortunately I'm not able to figure out, first, when I try cloning it, it returns as an object; Second I'm not able to wrap properly with an <li> tag, all the items that I try to append are being nested to another level.
You can see my fiddle here: http://jsfiddle.net/2FLkS/1/
and here's the code I'm working:
$('document').ready(function(){
var list1 = $('#list1 .wrap-item');
list1.click(function(){
var cloneItem = $(this).find('input[type=checkbox]').clone();
cloneItem = cloneItem + cloneItem.prop('value');
$("#selected-items").append(cloneItem).wrapInner('<li></li>');
})
});
Try this:
<div id="list1">
<div class="wrap-item">
<label>
<input type="checkbox" name="water" value="Water Element">Water</label>
</div>
<div class="wrap-item">
<label>
<input type="checkbox" name="water" value="Fire Element">Fire</label>
</div>
<div class="wrap-item">
<label>
<input type="checkbox" name="water" value="Earth Element">Earth</label>
</div>
</div>
<div id="list2">
<ul id="selected-items"></ul>
</div>
$('document').ready(function () {
$('#list1 .wrap-item input').click(function () {
var copy = $(this).parent().clone(),
input = $(copy).find('input'),
text = input[0].nextSibling.nodeValue,
newText = input.val();
input[0].nextSibling.nodeValue = newText;
$('#selected-items').append($(copy).wrap('<li></li>').parent());
})
});
jsFiddle example
How do I get the IDs of all the child(1,2,3 etc.) inside the parent1 and put them into an array with jquery.
Just as info, I have a lots of "parents" (parent1, parent2 etc.)
<div id="parent1">
<div id="child1" class="child">
<div id="baby1" class="baby">TEXT</div>
</div>
<div id="child2" class="child">
<div id="baby2" class="baby">TEXT</div>
</div>
<div id="child3" class="child">
<div id="baby3" class="baby">TEXT</div>
</div>
</div>
This is my code:
var save_array = [];
$('#parent1').find("div",'.child').each(function(){ save_array.push(this.id); });
But when I do this, I get the the "baby" too.
You can use .map()
var arr = $('#parent1').find("div.child").map(function () {
return this.id;
}).get();
console.log(arr); //["child1", "child2", "child3"]
DEMO
Use this :
var save_array = [];
$('#parent1').children().each(function(){
save_array.push(this.id);
});
.find() will go through all descendants. Use .children() instead.
Try this
var save_array = [];
$("[id*='parent']").find("div.child").each(function(){
save_array.push(this.id);
});
I think the correct syntax is like this:
$('#parent1').find("div.child").each(function(){
save_array.push(this.id);
});