jQuery get parent with specific class - javascript

I am listening to clicks on an element with a specific class. When I click inside this element I want to get this element, not the children I clicked on. How do I avoid getting children back when I call
event.target
Here is fiddle I created to demonstrate the problem
https://jsfiddle.net/yxvfgkcs/
Since I get children back they get CSS applied to them instead of the parent.
How do I figure out I have clicked on a child of element and get the element with class selectable back?

Since you're already using jQuery you can use .closest():
var clickedField = $(e.target).closest(".selectable");
See updated JSFiddle

Related

How to get around dynamic elements when web-scraping?

The code below works as I am able to click a button on the webpage using Python/Selenium/Firefox.
button on the webpage
driver.execute_script('''return document.querySelector('dba-app').shadowRoot.getElementById('configRenderer').shadowRoot.querySelector('ing-default-layout-14579').querySelector('dba-overview').shadowRoot.querySelector('ing-feat-agreement-overview').shadowRoot.querySelector('ing-ow-overflow-menu-14587').shadowRoot.querySelector('button')''').click()
However, some elements are dynamic and the numbers are changing anytime you rerun the script.
The changing elements:
'ing-default-layout-14579'
'ing-ow-overflow-menu-14587'
What must I do to get around the dynamic elements?
One option is to look for other attributes that stay the same across pageloads. For example, given your HTML, you could do:
document.querySelector('#configRenderer') // returns the config renderer element
document.querySelector('[data-tag-name="ing-default-layout"]') // returns the ing-default-layout element
document.querySelector('[data-tag-name="dba-overview]') // returns the dba-overview element
And so on. Or you could the same method to identify a parent or a child, and then navigate to the child or parent respectively.
If the HTML isn't stable enough even for that, another approach would be to search through all elements, and find the one(s) whose tagName starts with what you need.
for (const elm of document.querySelectorAll('*')) {
if (elm.tagName.toLowerCase().startsWith('ing-ow-overflow-menu')) {
// do stuff with elm, which is the overflow menu element
}
}

jquery children first remove class

I have a web page that has a few elements hidden on load here is the sections html layout
As you can see their is a button that on click i need to remove the hidden class on the next child here is the jquery code.
$(document).on('click', '#find-button', function (e) {
$('#find-data').children().first('.hidden').removeClass('hidden');
});
not sure what is happening but the code does not work
The logic isn't quite right.
first() returns the very first element in the collection so as written you would have the first child.
Use the .hidden selector on children() instead to filter only the ones with that class, and get first() of that reduced set
Change to
$('#find-data').children('.hidden').first().removeClass('hidden');

Jquery double click event after appending element to another element

I'm using agile toolkit, a framework that generates javascript code from PHP. I have a div element (I'll call it "top-element") that contains some other div elements, some buttons.
I want to move the "top-element" to another element, to change it's parent.
I tried something like:
$('#top-element').appendTo($('#new-parent'));
But the problem is that the "top-element" have some childrens that have click events, some buttons. After I append the "top-element" to a new element (after changing it's parent), the click events are triggered twice.
I tried to clone the element and append the cloned element to the new parent:
var cloned_top_element = $('#top-element').clone(true);
cloned_top_element.appendTo($('#new-parent'));
I got the same problem, the click event on "top-element" childrens was called twice.
The way to prevent double click is to use:
unbind('click') or off('click')
I tried something like:
$('#new-parent').find('.children-class').unbind('dblclick').unbind('click');
But still no results.
The binding for child buttons is like this:
$('.children-class').bind('click',function(ev){ ev.preventDefault();ev.stopPropagation(); other stuff });
The bind function appears only once. There aren't duplicates in the js code.
Any ideas? Anticipated thanks.
Remove the true in the clone function .clone(); this will not copy the event handlers

Appending already present element to DOM with Javascript/jQuery

I have an element in my DOM with two children, a div block and a button. When I click the button, I want to add a new copy of the same div block to the parentNode. Is this possible? What I have in the button onclick call now is:
document.getElementById("myele").appendChild(document.getElementById("myele").children[0])
But this just moves that child in the children array under the button, and if I click again moves the button back under the div block (this because now children[0] is the button itself). I've also tried to assign the child Node to a variable and append that instead, but the result is the same.
Is there a way to do what I'm trying to do without having to call a JS function that recreates the whole div block and then appends it?
EDIT: Having never used jQuery, I also tried to do this, but it doesn't seem to work:
<script>
function addOne(){
console.log('click')
$('.valori:first-child').clone(true).appendTo($('.valori'))
}
</script>
and the onclick call became:
javascript: addOne()
The console logs 'click', but no changes in the page.
Assuming I've understood you right, cloneNode may be what you are looking for.
You could clone your element and then append the clone to your parent node.
https://developer.mozilla.org/en/docs/Web/API/Node/cloneNode

Jquery's eq(0), "..first-child", first() not grabbing first child if its an iframe

Basically I need to grab the first child of a parent element, usually but not limited to an <iframe>.
<div>
<iframe src="www.asource.com">GRAB THIS AFTER A BUTTON IS CLICKED</iframe>
</div>
I have tried the following
$("#parent").eq(0).prop("tagName");
$("#parent").first().prop("tagName");
$("#parent:first").prop("tagName");
$("#parent:nth-child(1)").prop("tagName");
$("#parent:lt(1)").prop("tagName");
All of these return a "div" when I alert them. The reason I am getting the prop name was because I wanted to use the find() to get the element.
$("parent").find(ONE OF THE PROP CALLS ABOVE).animate({.....
because when I do:
$("parent").find('**iframe**').animate({.....
that is the only scenario that I can grab and properly animate an iframe.
however since we don't know if the first child is an iframe or not, i used .prop() to get the first element tag name and find it.
(please note, i tried all the above attempts directly with .animate(...) instead of .prop(...) but that also didn't grab the iframe.
Would really appreciate some guidance
You need find the first child so
$("#parent").children().first().prop("tagName");
$("#parent > :first-child").prop("tagName");
$("#parent > :eq(0)").prop("tagName");
Assuming you are using the correct parent selector - the above code assumes the parent element has the id parent like
<div id="parent">
<iframe src="www.asource.com">GRAB THIS AFTER A BUTTON IS CLICKED</iframe>
</div>

Categories