How can I access a div from another div? - javascript

<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>

Related

Jquery: selecting grand grand parents by class

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>

How to get the ID value of a parent element by class that is not immediate? jQuery

I know how to get the value of an immediate parents class,id..etc.. But how do you get the ID value of a parent that is not immediate, and not the grandest-parent, but of a known class name? I know you would think just to get the ID value based on the class name. But I have a lot of dynamically loaded content, with the same classes. So I must have the class that is a parent of THIS element. Thanks!
<div class="A">
<div class="B" id="1">
<div class="C">
<div class="D">
<input class="need-ID-of-class-B" value="">
</div>
</div>
</div>
</div>
You can try with .parents() OR .closest():
console.log($('.need-ID-of-class-2').closest('.2').attr('id'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="2" id="1">
<div class="3">
<div class="4">
<input class="need-ID-of-class-2" value="">
</div>
</div>
</div>
</div>
With .closest([class="2"]) you can get an ancestor matching .2, and get its ID:
const input = document.querySelector('input');
console.log(input.closest('[class="2"]').id);
<div class="1">
<div class="2" id="1">
<div class="3">
<div class="4">
<input class="need-ID-of-class-2" value="">
</div>
</div>
</div>
</div>
If at all possible, fix your HTML so that its classes are valid - class names should not start with a number. Then you can use . instead of [class]:
const input = document.querySelector('input');
console.log(input.closest('.two').id);
<div class="1">
<div class="two" id="1">
<div class="3">
<div class="4">
<input class="need-ID-of-class-2" value="">
</div>
</div>
</div>
</div>
Different ways to access nearest ancestor elements are, closest(), parents(), querySelector with closest().
$('.need-ID-of-class-B').closest('.B').attr('id');
$('.need-ID-of-class-B').parents('.B').attr('id');
document.querySelector('.need-ID-of-class-B').closest("div .B").getAttribute('id');

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.

Move divs from a list to another position

I have a list of items that I'm generating with ng-repeat, that looks something like this
...
<div class="a">
<div>
<div class="b"></div>
</div>
</div>
<div class="a">
<div>
<div class="b"></div>
</div>
</div>
...
I want to move all divs with class="b" outside their parent div with class="a", something like this.
...
<div class="a">
<div>
</div>
</div>
<div class="b"></div>
<div class="a">
<div>
</div>
</div>
<div class="b"></div>
...
I'm currently trying something with jQuery
$(".b").insertAfter(".a")
It just ends up generating a bunch of divs with class="b" for every div with class="a"
Use .each() to traverse each .b
$(".b").each(function(){
$(this).insertAfter($(this).closest(".a"))
})
In your code
$(".b").insertAfter(".a")
the $(".b") finds all the divs with class = "b" in the DOM and inserts it after each .a

Categories