Set top level element node for jquery - javascript

I have the below page layout:
<div class="content">
<div class="main-content profile0">
<div class="messages">
</div>
<div class="moreinfo">
</div<
</div>
<div class="main-content profile1">
<div class="messages">
</div>
<div class="moreinfo">
</div<
</div>
</div>
Currently I have been doing things like
$('.messages').remove();
but I need to be able to set which div is actually the parent, so I can tell jquery to only look at the childer of the div "main-content profile1"
So that then
$('.messages').remove();
refers to the child of "main-content profile1" and not "main-content profile0"

You can use the find() like
$('.main-content.profile1').find('.messages').remove();

As AmmarCSE said, you can use find(), but you could also just change the selector.
$('.main-content.profile1 .messages')

Related

JQUERY append data before sibling

I have got this html code
<div class="chatp">
<div class="chatpart">
</div>
</div>
And in my jquery i am trying to append
<div class='headchat'>
</div>
Inside chatp but it appends it after chatpart and here is what happens
<div class="chatp">
<div class="chatpart">
</div>
<div class='headchat'>
</div>
</div>
What i want is
<div class="chatp">
<div class='headchat'>
</div>
<div class="chatpart">
</div>
</div>
You can use prepend to append in start.
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
Reference: https://api.jquery.com/prepend/
Example:
<div class="chatp">
<div class="chatpart">
</div>
</div>
<script>
$('.chatp').prepend('<div class="headchat"></div>');
</script>
Use Jquery prepend function $
$(".chatp").prepend("<div class='headchat'> </div");

Hiding an element through DOM traversal

What if it has few parents? (as in grandparents, great grandparents)
<div class="lvl1">
<div class="lvl1.1">
<div class="lvl1.2">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
<div>
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
JS
$(function(){
$(".btn-submit").click(function() {
$(this).parent(".lvl1").siblings(".lvl2").children(".b2").hide();
});
});
How to use .parent, .parents, .siblings, .children, .next, .prev to show and hide the div?
If I assume that you have that structure repeated and want to remove the one in the same copy as the .btn_submit that was clicked, we go up to the .lvl1 via closest, over to the .lvl2 via .nextAll().first() (or we could just use .next), and then .find the .b2 in there:
$(".btn-submit").click(function() {
$(this).closest(".lvl1").nextAll(".lvl2").first().find(".b2").hide();
});
Your code is very close, just two things that I had to change:
Instead of using .siblings(".lvl2"), which will find all of them, I used .nextAll(".lvl2").first() to just find the one immediately after "this" .lvl1.
I used find instead of children, because children will only go down one level (direct child), not search descendants
I also used closest(".lvl1") so that if you move the .btn_submit deeper into .lvl1, it will continue working.
Live Example:
$(function() {
$(".btn-submit").click(function() {
$(this)
.closest(".lvl1")
.nextAll(".lvl2")
.first()
.find(".b2")
.hide();
});
});
<div class="lvl1">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
<div class="lvl1">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
<div class="lvl1">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
there is possible to disappear div directly using,
$(".b2").hide();
but if you want to use ".parent, .parents, .siblings, .children, .next, .prev",
$(".btn-submit").parent().siblings(".lvl2").children().children(".b2").hide();
need to you children() Two times... because .b2 is not directly child to .lvl2,
another best way to hide ".b2" is,
$(".btn-submit").parent().siblings(".lvl2").find(".b2").hide();
so your Ans is:
$(".btn-submit").click(function() {
$(".btn-submit").parent().siblings(".lvl2").find(".b2").hide();
});
.children selects the children and not descendants of the element. You just need to replace the .children with the .find method and your code will select the target element.

Get parent div recursively

I have this HTML
<div id="main-container">
<div style="style-here" data-status="active" data-state="loaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
<div style="style-here" data-status="active" data-state="unloaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
<div style="style-here" data-status="inactive" data-state="unloaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
</div>
On click on one of the elements that has {{click_event}} I want to search recursively till I can find an element that has data-status or data-state, and in the worst case when I meet the id from top to stop de search.
The HTML is made generated from another JS file and I can't change the way is made it. Is there a way with closest or parent from jQuery to search after data attribute?
Thank you.
No need for recursion, you can use closest():
$clickedElement.click(function() {
var $parent = $(this).closest('[data-status], [data-state], #main-container');
});

Is there a way to wrapAll() but ignore one element?

If you have the following code:
<div class="parent">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
How can I wrap a new div around div with class 2,3,4,5 so it looks like this:
<div class="parent">
<div class="1"></div>
<div class="sub">
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
</div>
wrapAll on the parent would wrap everything with a new div, is there a way to make it ignore the first div?
Use gt(0) to select all but the first one div(direct descendant) and wrapAll. This will select all divs with index greater than 0 present under .parent div.
$('.parent > div:gt(0)').wrapAll('<div class="sub">');
Fiddle
See :gt()
Output:
<div class="parent">
<div class="1">1</div>
<div class="sub">
<div class="2">2</div>
<div class="3">3</div>
<div class="4">4</div>
<div class="5">5</div>
</div>
</div>
Use the not() filter or the :not() selector.
$('.parent div').not('.1').wrapAll('<div class="sub">');
Or alternatively:
$('.parent div:not(.1)').wrapAll('<div class="sub">');
You can also use div:first-child in place of .1 if you always want to ignore the first element.
If the element you want to keep out is not necessarily the first, you could use:
$(".parent div").not("div.1").wrapAll("<div class='sub'>");
Although, this will re-order your divs so that the wrap comes first, and the unwrapped element comes last. Not a problem when it's the first element, but if it's the third, for example, the output would be:
<div class='sub'>
<div class="1"></div>
<div class="2"></div>
<div class="4"></div>
<div class="5"></div>
</div>
<div class="3"></div>
Example:
http://jsfiddle.net/tomtheman5/3TL4M/
edit: Just saw #Corion's answer... This is essentially the same, but with some more information. I'll leave it up.

jQuery: Wrap only first and second child, not the rest of children

In my actual code:
<div id="mother">
<div id="child-01"></div>
<div id="child-02"></div>
<div id="child-03"></div>
</ul>
I need to produce:
<div id="mother">
<div id="myWrap">
<div id="child-01"></div>
<div id="child-02"></div>
</div>
<div id="child-03"></div>
</ul>
I was playing with wrap, .wrapAll() and children, but I'm stuck.
If in my actual code i have:
<div id="mother">
<div id="child-01"></div>
<div id="child-02"></div>
<div id="child-03"></div>
</ul>
<div id="uncle">
<div id="cousin-01"></div>
<div id="cousin-02"></div>
<div id="cousin-03"></div>
</ul>
How do i produce:
<div id="mother">
<div id="myWrap">
<div id="child-01"></div>
<div id="child-02"></div>
<div id="cousin-02"></div>
</div>
<div id="child-03"></div>
</ul>
First as Adam said remove the # prefix from your id attributes. Also match your closing tags, currently you have a </ul> where a </div> should be.
Then, you can do it using :lt() and .wrapAll() like this:
$("#mother div:lt(2)").wrapAll("<div id='myWrap'></div>");
This gets everything less than index 2 (0 and 1 are the first 2), then wraps it. You can test it here.
Remove # from your HTML ids.
$("#mother div:eq(0), #mother div:eq(1)").wrapAll("<div id='father'></div>")
sharp should not be part of the id's. Then you can do:
$('#child-01, #child-02').wrapAll('<div id="#mywrap" />');
$(document).ready(function(){
$(".new-grid__item:nth-child(1), .new-grid__item:nth-child(2)").wrapAll('<div class="child"></div>');
});

Categories