Get parent div recursively - javascript

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');
});

Related

modify / move an existing html tag in the DOM (javascript)

I want to move my div class="contentlinks" tag with its content, to place it in the div class="row" after the div class="col-12".
Here is the basic html architecture :
<span id="data">
<section id="" class="thesectionQ">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
</div>
</div>
</section>
<div class="col-12 contentlinks">
<a class="btn">link1</a><a class="btn">link2</a>
</div>
</span>
Tags are dynamically created in js... my problem is that I can't seem to use appendChild ...
my problem is that I can't seem to use appendChild ...
I'm trying to target my section with a class="thesectionQ" in a variable as well as my div class="contentlinks" that I want to move :
for example...
var thedata2 = document.getElementById('data').getElementsByClassName('thesectionQ');
var thedata = document.getElementById('data').getElementsByClassName('contentlinks');
thedata2.appendChild(thedata);
but I have errors ... and too often
give section id so it become easy.
document.querySelector('#sectionId div.row')
.appendChild(document.querySelector('div.contentlinks'))

Rearranging the order of divs in an RSS using jQuery

I need to rearrange the div order of an RSS. Each item has 3 divs. I will need to move the div with the class "itemDate" before the div with the class "itemTitle" (see markup below). Should I use the function .each(); is there a jQuery out of the box solution for this or do I need to write my own function?
<div id="RSS">
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
</div>
There is a function in jQuery called prependTo, which moves a element to the beginning of a given target. Check it out the example below.
$('.itemDate').each(function(){
$(this).prependTo($(this).parent());
});
This code just move every itemDate into the beginning of every respective parent.

Set top level element node for jquery

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

How can I select a parent element, and all child divs that are not the first, as well as siblings of the parents and their children

Sorry for the poor title, I'm not sure how to word this issue.
I need some help writing a jQuery or javascript selector to get every childBlock that isn't the first. There are N number of parentBlock divs with at least one childBlock div child. We would like to change some of the labels for every subsequent child div after the first. What is the most efficient way to select these elements?
<div class="parentBlock">
<div class="elementHead">
</div>
<div class="elementBody">
<div class="childBlocks">
<div class="childBlock" id='1'>
</div>
<div class="childBlock" id='2'>
</div>
<div class="childBlock" id='3'>
</div>
<div class="childBlock" id='4'>
</div>
...
</div>
</div>
<div>
<div class="parentBlock">
<div class="elementHead">
</div>
<div class="elementBody">
<div class="childBlocks">
<div class="childBlock" id='5'>
</div>
<div class="childBlock" id='6'>
</div>
<div class="childBlock" id='7'>
</div>
<div class="childBlock" id='8'>
</div>
...
</div>
</div>
<div>
So in the example above, I would like to select childBlocks with an id of 2, 3, 4, 6, 7, 8. In my actual code, these div's don't have an id, they are just classed if that makes a difference at all.
I've tried:
$(".parentBlock").find(".childBlock").not(':first').find('label.category ').text("Subcategory");
But it seems to find the first childBlock on the screen, skip over it, then apply the text change to every other childBlock div that it finds.
Thoughts, or suggestions?
You were very close. You want first-child, not first:
http://jsfiddle.net/pMYWS/
$(".parentBlock").find(".childBlock").not(':first-child').text("Subcategory");
(I am assuming that label.category is something present in your real code that isn't shown in this demo snippet)
what about something like this?
$(".childBlocks:not(:first-child)") (do something here)

how to move div class with jquery

<div class="full_widget">
<div class="connect_top clearfix">
</div>
<div id="stream_content" class="page_stream_short">
</div>
<div class="connections">
</div>
</div>
what i whant to do is to move connections class in the first place juste after
<div class="full_widget">
just like this :
<div class="full_widget">
<div class="connections">
</div>
<div class="connect_top clearfix">
</div>
<div id="stream_content" class="page_stream_short">
</div>
</div>
thanks
$(".connections").prependTo(".full_widget");
This will always move .connections to the inner top of .full_widget.
$(".connections").insertBefore(".connect_top");
If you added in another element to the top, using insertBefore() will insure it's displayed right above .connect_top, instead of moving it directly to the top.
If you have more than one of those, simply do:
$(".connections").prepend(function() {
var ele = $(this);
ele.prependTo(ele.parent());
});
You can use the jquery prepend function:
$('.full_widget').prepend( $('.connections') );
$('.full_widget').prepend($('.connections'));

Categories