How to traverse through the children div recursively

How to traverse through the children div recursively - javascript

i am having the div structure like this, which will be like children-grandchildren-great grand-children and so on repeatedly as the div structure end is unknown. so my question is How to traverse recursively until the last div.
<div class="parent">
<div class"con">
<div class="app">
<div class"con">
<div class="app">
<div class"con">
<div class="app">
<div class"con">
<div class="app">
</div>
<div class="disapp">
</div>
</div>
</div>
<div class="disapp">
<div class"con">
<div class="app">
</div>
<div class="disapp">
</div>
</div>
</div>
</div>
</div>
<div class="disapp">
<div class"con">
<div class="app">
</div>
<div class="disapp">
</div>
</div>
</div>
</div>
</div>
<div class="disapp">
<div class"con">
<div class="app">
<div class"con">
<div class="app">
</div>
<div class="disapp">
</div>
</div>
</div>
<div class="disapp">
<div class"con">
<div class="app">
</div>
<div class="disapp">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I found a solution like this - Jquery tree traversal - Nested Unordered list elements to JSON, but here list tag is only processed but in my case I want all the div to be processed as JSON.

if you can use jQuery, then you could just do something like $(".parent").find( div:last'). If you want to do it for each level, then you'd have to $(".parent" ).find( "div" ).each(... and traverse that way

Related

Find closest div inside another div

Sample:
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>
When i click "column_expand_list" i need to find closest "element". I have a function, but I don't understand why it doesn't work:
console.log($(this).parent().parent().closest('.element'));
What am I doing wrong?

In your HTML there is no closest element with the class element. You can get the closest .table_element and from this element you can then navigate to the next() or prev() .element
closest() only traveres the DOM in the UP direction, that's why you can't find it from the clicked element you are on.
$('.column_expand_list').on('click', function() {
console.log($(this).closest('.table_element').next('.element'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>

I guess this is just a repetition od #Cloned and #AlwaysHelping's answers, but anyway, here it is:
$(".column_expand_list").click(function(){console.log($(this).closest(".table_element").prev()[0])})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X this will not find a suitable "parent"</div>
</div>
<div class="element">YAY 1</div>
<div class="table_element">
<div class="column_expand_list">X click here.</div>
</div>
<div class="element">YAY 2</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY</div>
</div>

You could simply use one .parent to go back .next() to get the div.element - you are using parent twice which takes you out of the actual parent table_cover div
Using .next() like this:
$(this).parent('div').next('.element').text()
Demo:
$('.column_expand_list').click(function() {
console.log($(this).parent('div').next('.element').text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table_cover">
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 1</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 2</div>
<div class="table_element">
<div class="column_expand_list">X</div>
</div>
<div class="element">YAY 3</div>
</div>

jQuery show/hide methods arent working

Here is my codepen for you guys to play with.... CodePen.io
I cannot seem to get the #play-again button to show up once a game has finished using $('#play-again').show().
Any thoughts on this???
Update Added raw html link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="banner">
<p>tic-tac-toe</p>
<button id="play-again"> <i class="fa fa-repeat"></i></button>
</div>
<div class="board">
<div class="row" id="row-1">
<div class="col" id="col-1-1">
<div class="content"></div>
</div>
<div class="col" id="col-1-2">
<div class="content"></div>
</div>
<div class="col" id="col-1-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-2">
<div class="col" id="col-2-1">
<div class="content"></div>
</div>
<div class="col" id="col-2-2">
<div class="content"></div>
</div>
<div class="col" id="col-2-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-3">
<div class="col" id="col-3-1">
<div class="content"></div>
</div>
<div class="col" id="col-3-2">
<div class="content"></div>
</div>
<div class="col" id="col-3-3">
<div class="content"></div>
</div>
</div>
</div>
</div>
The issue is that you must place the button#play-again outside the p when i changed, it is working for me

jQuery - only target class elements with same parent

So i have a lot of profiles and thereby many divs which are repeated again and again
Now i want to target a class element with jquery and animate another class element in the same profile
in my case:
$(',profile_menu').click(function() {
$( ".profile_like" ).removeClass( "m_hidden" )
$(".profile_like").animate({
left: 0+'%'
},300);
The Problem is that i only want to target the classes which are in the same profile.
I hope that the issue has been well described.
<!-:::::::::::::::::::: Profile 1::::::::::::::::::::::::::::::::::::::::-->
<div class="profile_box">
<div class="profiles">
<div class="profile_icons">
<div class="profile_like m_hidden"></div>
<div class="profile_favorite m_hidden"></div>
<div class="profile_present m_hidden"></div>
<div class="profile_chat m_hidden"></div>
</div>
<div class="profile_spacer"></div>
<div class="info_container">
<div class="info_bar">
<div class="profile_name_spacer"></div>
<div class="profile_name"></div>
<div class="profile_city"></div>
</div>
<div class="profile_menu"></div>
</div>
</div>
</div>
<!-:::::::::::::::::::: Profile 2::::::::::::::::::::::::::::::::::::::::-->
<div class="profile_box">
<div class="profiles">
<div class="profile_icons">
<div class="profile_like m_hidden"></div>
<div class="profile_favorite m_hidden"></div>
<div class="profile_present m_hidden"></div>
<div class="profile_chat m_hidden"></div>
</div>
<div class="profile_spacer"></div>
<div class="info_container">
<div class="info_bar">
<div class="profile_name_spacer"></div>
<div class="profile_name"></div>
<div class="profile_city"></div>
</div>
<div class="profile_menu"></div>
</div>
</div>
</div>
<!-:::::::::::::::::::: Profile 3::::::::::::::::::::::::::::::::::::::::-->
<div class="profile_box">
<div class="profiles">
<div class="profile_icons">
<div class="profile_like m_hidden"></div>
<div class="profile_favorite m_hidden"></div>
<div class="profile_present m_hidden"></div>
<div class="profile_chat m_hidden"></div>
</div>
<div class="profile_spacer"></div>
<div class="info_container">
<div class="info_bar">
<div class="profile_name_spacer"></div>
<div class="profile_name"></div>
<div class="profile_city"></div>
</div>
<div class="profile_menu"></div>
</div>
</div>
</div>
<!-:::::::::::::::::::: Profile 4::::::::::::::::::::::::::::::::::::::::-->
...
...
...

How to get the id of each first element of a nexted div in JQuery

here is my HTML code
<div id="parent">
<div id="computer">
<div id="items">
<div id="1">hp</div>
<div id="2">compaq</div>
<div id="3">toshiba</div>
</div>
</div>
<div id="laptop">
<div id="1">i5</div>
<div id="2">dual core</div>
<div id="3">i3</div>
</div>
<div id="printer">
<div id="laser">hp laser</div>
</div>
<div id="cpu">
<div id="item">
<div id="1">pintuim</div>
<div id="2">celeron</div>
</div>
</div>
<div id="scanner">
<div id="canon">
<div>canon</div>
</div>
</div>
</div>`
I am trying to get the id of each first element of the parent div
that is to get an
array=[computer, laptop, printer, cpu, scanner]
here is my jquery code but it's taking everything.
var a = $("div.content :nth-child(1)")find("*").toArray();
please I need some help thanks

there is a selector in jQuery which will return the first level of children: DEMO
var a=[];
$("#parent > div").each(function(){ // using > will return the first level of children
a.push($(this).attr('id'));
});
alert(a);

Those are children of the #parent element so you can iterate over that and create an array out of it using .map()
var array = $('#parent').children().map(function() {
return this.id;
}).get();
snippet.log(array)
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
<div id="computer">
<div id="items">
<div id="1">hp</div>
<div id="2">compaq</div>
<div id="3">toshiba</div>
</div>
</div>
<div id="laptop">
<div id="1">i5</div>
<div id="2">dual core</div>
<div id="3">i3</div>
</div>
<div id="printer">
<div id="laser">hp laser</div>
</div>
<div id="cpu">
<div id="item">
<div id="1">pintuim</div>
<div id="2">celeron</div>
</div>
</div>
<div id="scanner">
<div id="canon">
<div>canon</div>
</div>
</div>
</div>

How to wrap all next elements until?

I have following html:
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
What I am trying to achieve, is wrap each .menuItem and all next .submenuItem with .menuSet. Unhappily, the following js wraps the whole snippet instead of the set defined above.
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
For make my intention more understandable, below I post the desired result:
$(".menuItem").nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuSet">
<div class="menuItem">Domů</div>
</div>
<div class="menuSet">
<div class="menuItem">O nás</div>
</div>
<div class="menuSet">
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Projekční činnost</div>
</div>
<div class="menuSet">
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Kontakty</div>
</div>

As you are selecting all the menuItem's with class and than filtering from there, wrapAll will wrap your whole collection.
To solve this, one way would to be use $.each() and iterate through the menuItems and than wrap them.
$(".menuItem").each(function (index) {
$(this).nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
});
JSFiddle Demo.

Develop Reference

JavaScript is the programming language of the Web.

How to traverse through the children div recursively - javascript

if you can use jQuery, then you could just do something like $(".parent").find( div:last'). If you want to do it for each level, then you'd have to $(".parent" ).find( "div" ).each(... and traverse that way

Related

Find closest div inside another div

jQuery show/hide methods arent working

jQuery - only target class elements with same parent

How to get the id of each first element of a nexted div in JQuery

How to wrap all next elements until?

Categories

Resources