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);
});
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>
what I'm trying to do is to check if my inner <div> has a text for example Ended and then remove if it has a text. I have multiple <div> with the same class name. I tried using .filter(). I would like to remove the div container_one that contains the found element.
Here is my HTML:
var $filstatus = $('.status').filter(function() {
return $(this).text() == 'Ended';
});
$filstatus.remove();
<div class="main_container">
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">On going</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
</div>
Thank you for the help!
I would use the jQuery's selector by content
combined with .closest(). This might be the shortest way:
$('.status:contains("Ended")', $('.main_container')).closest('.container_one').remove();
First ('.status:contains("Ended")') will select all elements that have a class status, contain the text "Ended" and are children of main_container (not needed but is recommended to speed up selection of elements on complex pages).
Then the method .closest('container_one') will climb up the parents tree for each of the elements from the previous step and select the first parent element with class 'container_one'.
At last it will remove all elements found.
Note: all those methods work both with single element and collections of elements, so no need of any for/foreach.
Working JSFiddle Demo
Pure JavaScript solution with forEach:
var div = document.querySelectorAll('.container_one');
div.forEach(function(el){
var target = el.querySelector('.status');
if(target.textContent == 'Ended'){
el.remove();
};
})
<div class="main_container">
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">On going</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
</div>
Try this
$filstatus.parent().parent().remove();
filter will return an array , then use each to loop over that and delete the element. In this case it will remove that specific div but the parent div will still be in dom
var $filstatus = $('.status').filter(function() {
return $(this).text().trim() === 'Ended';
});
$filstatus.each(function(index, elem) {
$(elem).remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main_container">
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">On going</div>
</div>
</div>
<div class="container_one">
<div class="inner_container">
<div class="status">Ended</div>
</div>
</div>
</div>
If you want to remove .container_one whose inner child has the text Ended, try
const ended = $('.status').filter((index, element) => $(element).text() === 'Ended')
ended.parents('.container_one').remove()
Since you want to remove the closest ansistor with class .container_one, you will need to use closest
$filstatus.closest(".container_one").remove();
Check this: https://jsfiddle.net/n3d5fwqj/1/
https://api.jquery.com/closest/
Try using this if you don't need $filstatus in other places
$('.status').each(function(){
if ($(this).text() == "Ended"){
$(this).parent().parent().remove();
}
})
I see your problem is you are able to remove the child div status but what you want is to remove the entire parent div with class container_one
you can use $.each for that and use closest(class_name) to remove the parent including its child
$.each($('.status'), function(idx, div) {
if ($(this).text() == 'Ended') {
$(this).closest('.container_one').remove();
}
});
Demo
or you can continue your filter and just add .closest('.container_one') to your jquery selector
var $filstatus = $('.status').filter(function() {
return $(this).text() == 'Ended';
});
$filstatus.closest('.container_one').remove();
Demo
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 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);
});
});