Jquery: selecting grand grand parents by class - javascript

I'm trying to select an element by clicking on its grand grand grand child. But I can't find the way without using parent().parent() etc.
General HTML
I have an HTML divided in pages
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
Inner page HTML
<div class="page">
<div class="">
<div class="to_move">
<div class="">
<div class="clicked_element"></div>
</div>
</div>
</div>
</div>
When clicking clicked_element I want to copy to_move class element to previous page.
The inner structure of the page element is not always the same, that's why I want to avoid using multiple parent().
I tried
$(this).parentsUntil('.page').html()
But I get only clicked_element parent.
$(this).parents('.page').html()
With this parents() option I get undefined.
$(this).closest('.page').html()
Again I get undefined.
Any clues welcome.

You could very well use closest :
$('body').on('click', '.clicked_element', function() {
$(this).closest('.page').clone().appendTo('body')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<div class="page">
<div class="">
<div class="to_move">
<div class="">
<div class="clicked_element">Click me to copy my whole class</div>
</div>
</div>
</div>
</div>

$(this).parents('.page') should work. I'm guessing you're binding the the wrong event. The key to this answer is not the selector ($(this).parents...) but the event binding ($(".clicked_element").click...). In your case, I guess that this is not the element you were looking for because the event binding is probably wrong.
$(".clicked_element").click(function() {
alert($(this).parents('.page').attr('printme'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="page" printme="You found me!">
<div class="">
<div class="to_move">
<div class="">
<div class="clicked_element" style="width: 250px; height:250px; background-color: blue">
</div>
</div>
</div>
</div>
</div>

Related

Hide 2 of the 3 item divs

I'm trying to hide 2 of the 3 item divs, the class name is item. I can usually use css display none, but they all have the same name, and its coming from WordPress plug in, and I believe its a template, so any changes made, it just replicates. Is there anyway I can add ID to each div which will automatically increment value by one, then I can use CSS display option?
<div class="related-post grid">
<div class="post-list">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
to
<div class="related-post grid">
<div class="post-list">
<div class="item" id="01">
</div>
<div class="item" id="02">
</div>
<div class="item" id="03">
</div>
</div>
</div>
You can use CSS pseudo classes to accomplish what you want:
.related-post .post-list .item:not(:last-child) {
display: none;
}
will hide any element with class item that is not the last element.
Or if you want to specifically target the first and second element:
.related-post .post-list .item:nth-child(1),
.related-post .post-list .item:nth-child(2)
{
display: none;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
In Javascript you could assign dynamically an id attribute to all the .item elements like so:
document.querySelectorAll('.item').forEach((i,n) => i.id = 'item_' + ++n);
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

How can I access a div from another div?

<div id="a">
<div id="b">
<div id="c"></div>
</div>
<div id="a2"></div>
</div>
I want from div where id="c" to access div where id="a2", but it's not working:
$("#c").parentsUntil("#a").find("#a2");
According to the documentation for parentsUntil:
Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
What this means is that parentsUntil is returning all of the parents of #c except for #a. (Which in this case is just #b.) And none of those elements contain #a2. Use closest instead:
$("#c").closest("#a").find("#a2").css('color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
<div id="b">
<div id="c">
</div>
</div>
<div id="a2">
test
</div>
</div>

javascript remove parent div where particular class appears in hierarchy below

First time question on this site. Sorry if I have failed the formatting test.
I am almost completely ignorant about javascript but I have been told I need it to solve this problem. I have a page where there are multiple divs with the same class. Each has a multi-level hierarchy beneath it. I want to stop the parent displaying if any of its children contain a div of a particular class. e.g. In the following code I want to stop all divs with class of "classa" displaying if one of their direct or indirect children contains class of "classb draft". So here, none of divb would display.
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa"
<div id="divabaaa" class="classb">
</div>
</div>
</div>
</div>
</div>
<div id="divb" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa"
<div id="divbbaaa" class="classb draft">
</div>
</div>
</div>
</div>
</div>
You are not closing div in
<div id="divabaa"
You can use querySelectorAll() to select all the children with that class (draft). Then use forEach() to loop through all the matching elements to find the closest() div with .classa to set display property to none.
var elements = document.querySelectorAll('.classa .draft');
elements.forEach(function(el){
el.closest('.classa').style.display = 'none';
});
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa">
<div id="divabaaa" class="classb">
Without Draft
</div>
</div>
</div>
</div>
</div>
<div id="divs" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa">
<div id="divbbaaa" class="classb draft">
Draft
</div>
</div>
</div>
</div>
</div>

how do toggleClass in jquery?

I has example code html
<div class="new">
<div class="wrapper">
<div class="icon"></div>
<div class="content">content</div>
</div>
<div class="list"></div>
<div class="wrapper">
<div class="icon"></div>
<div class="content">content</div>
</div>
<div class="list"></div>
</div>
updated: I want when click to class icon in wrapper first toggle class list first . And class list second not change. Many thanks
$('.icon').click(function(){
$(this).next('.content').toggle('slow')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="new">
<div class="wrapper">
<div class="icon">QWE</div>
<div class="content">content</div>
</div>
<div class="wrapper">
<div class="icon">QWE</div>
<div class="content">content</div>
</div>
</div>
Use .next()
Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Or .siblings()
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

JQ UI Sortables: Stop some elements inside Sortable from being sorted

I have this sortable's structure (it's a portlet).
<div id="sortable">
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
<div class="gripper_h"></div>
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
<div class="gripper_h"></div>
<div class="row">
<div class="window"></div>
<div class="gripper_v"></div>
<div class="window"></div>
</div>
</div>
'window' elements are sortables. Grippers shouldn't be sortables. I've specified in the Sortable options:
{ items: '.window' }
But I'm seeing that windows are sorted over grippers while I drag, which I don't want to. I want grippers to be invisible to the Sortable.
EDIT: Grippers are used to resize windows in both X and Y axis. With the given html code i will get this portlet.
PORTLET IMAGE
The problem occurs when sorting between windows of the same row (".gripper_v")
I'm not sure exactly what you're trying to do here (a screenshot might help), is the "gripper" the part of the "window" where the user should click to drag?
If that's the case, try adding the gripper within the window element like this:
<div id="sortable">
<div class="window">
<div class="gripper"></div>
</div>
<div class="window">
<div class="gripper"></div>
</div>
</div>

Categories