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::::::::::::::::::::::::::::::::::::::::-->
...
...
...
Related
I'm looking to get my highlighter (blue bar) to stay on the element that is clicked on. I want to keep the hover animation but also include the option to have it stay on the <div> the user clicks. Any insight is greatly appreciated.
Pen: https://codepen.io/chriskaram/pen/eGXrOp
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment</h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Apprentice Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1"></span>
<span class="demo__hover demo__hover-2"></span>
<span class="demo__hover demo__hover-3"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Apprentice Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In this example, I just focused on demo__element-3.
Check this link: https://codepen.io/anon/pen/GMbYdz
These are the modifications to be made:
CSS:
Add .active to all demo__hover-3:hover styles(in css).
(ie, add .demo__hover-3.active to .demo__hover-3:hover)
Element:
Add class
active to demo__hover elements.
(in this case, it become
<span class="demo__hover demo__hover-3 active"></span>)
Jquery:
Add jquery to add active to element if user clicks it.
Just like the bootstrap manu when you click one option it will add a class 'active' to element <li>
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
This question already has answers here:
JQuery Remove Parent Elements
(3 answers)
Closed 6 years ago.
can someone help me solve this problem.
I want loop through class 'row' and delete entire class 'card-col' that contain id=x2 or x3.
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1"></div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2"></div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3"></div>
</div>
</div>
</div>
expected result something like this.
what jquery i can use ?
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1"></div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x4"></div></div>
</div>
</div>
thanks
Go quickly trough the jQuery docs:
Selectors how to get an element using the right selectors
.closest() test up the DOM tree finding the closest matching element
.remove() yep.
jQuery(function($) { // DOM is now ready
$("#x2, #x3").closest(".card-col").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1">x1</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2">x2</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3">x3</div>
</div>
</div>
</div>
The other way around, you can target first all .card-col and that use :not(:has(#x1)) to filter and than remove
https://api.jquery.com/not-selector/
https://api.jquery.com/has-selector/
jQuery(function($) { // DOM is now ready
$(".card-col:not(:has(#x1))").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1">x1</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2">x2</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3">x3</div>
</div>
</div>
</div>
You could use parents() :
$("#x2, #x3").parents(".card-col").remove();
Hope this helps.
$("#x2, #x3").parents(".card-col").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1">x1</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2">x2</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3">x3</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x4">x4</div>
</div>
</div>
</div>
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.
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