I can use the following to get an element:
document.getElementById('the-container');
Is there a way to get a child (not necessarily an immediate child) of this component.
<div id="the-container">
<div class="whatever">
<form>
.....
I'd like to get the form element, without adding an id/class or targeting it via the form tag (might be other forms on page).
No jquery but happy for HTML5.
querySelector is a property of Element objects and takes a selector as its first argument.
document.getElementById('the-container').querySelector("form");
You could also use it directly on the whole document with a more elaborate selector:
document.querySelector('#the-container form')
Related
I would like to add an ID to the div with the class name="leaflet-control-layers-base". Because this HTML script is automatically generated through an API (Leaflet) when the page is loaded, I cannot add the id within the script.
The reason I am asking is because I have two of these scripts as shown below within my page. I would like to distinct them from each other so that I can refer to them individually. The only difference is that the other script is not located in the "TOCContent" div.
Any ideas how I can add an id using JavaScript or jQuery to the 'leaflet-control-layers-base' class?
Here is my script:
<div id="TOCContent">
<div class="leaflet-control-layers leaflet-control-layers-expanded" aria-haspopup="true">
<form class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
</form>
</div>
Try this:
$(".leaflet-control-layers-base").attr("id","your id will go here");
Select the element using the combinator selector, to ensure it selects a descendant of #TOCContent, then set the id property.
$('#TOCContent .leaflet-control-layers-base').prop('id', 'someid');
Remember to run this after your API code has rendered the elements on the page, not before. You will probably need to hook up to some sort of complete event on your API, because the basic DOM Ready event will likely fire before the API has rendered the elements.
Side note: it may not be necessary to give the element an ID, since by doing so you need to obtain a reference to the element anyway, which you can store in a variable.
var base = $('#TOCContent .leaflet-control-layers-base');
I am looking for a correct way to find elements first ancestor to be a child of an element with a specific class.
Using XPath notation I'm looking for (if I didn't botch it):
./ancestor::*[../#class='my_class']
I guess I can run a while(...) loop calling parent() until current elements parent has specified class and go from there, but maybe there is some selector/filter/whatever in jQuery that can be used instead?
If I understood it correctly, you're trying to get the last ancestor when going up, before hitting the ancestor with '.my_class':
$(element).parentsUntil('.my_class').last()
See documentation.
In jquery find a child with specific class :
$("mycontrol").find(".myclass");
find parent with specific class :
$("mycontrol").closest(".myclass"); //return the first parent
Perhaps
jQuery(".my_class").parent().eq(0)
If I have this right.. First parent that is a child of an element with class "my_class":
Find all the elements with class .my-class and get the set of their children, then use .closest()
on your jQuery object, with that set as an argument.
$('myElementSelector').closest($('.my-class').children())
I think that should do it...
Here is a part of my html. (it is written using ejs)
<div class="objAddDiv">
<tr><td><button class="addObj">Do this action</button></td></tr>
<table><div class="objects"></div></table>
</div>
I have several objAddDiv divs on this page. Each has the same structure inside of it. I use .append() to add more ejs to .objects. I am having a hard time adding to only the .objects div that is inside of the same div as the button. I tried doing the following
".addObj click": function(el, element){
$(".addObj").closest(".objAddDiv").find(".objects").append(//my ejs utility here)
}
The problem is that $(".addObj").closest(".objAddDiv") returns all .objAddDiv on the page. I have looked at the jquery documentation for .closest and it says closest should only return one element. Is there a better way to do this? What am I doing wrong. (these are not my real class names btw)
It's because you are calling that method on every element with a class of 'addObj':
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
So you get the closest objAddDiv to each addObj element.
Assuming you are doing this inside the click event of the button use this to get the correct element:
$(this).closest(".objAddDiv").find(".objects").append(//my ejs utility here)
Here is the answer that I figured out (for anyone who comes next) I needed to use the element I passed into the function:
el.closest(".objAddDiv").find(".objects").append(//ejs append stuff)
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>
I am making changes to a jQuery validator, when there is an error it inserts a div to the parent element. I am trying to remove an the inserted div with by the specific class name from the parent.
$(element).parent().remove('.removeThis');
I thought the above code would work but it does not remove the the div.
.remove([selector]) will remove an element with the optional matching selector from the current list of elements in the jQuery object. It does not look through the children of the wrapped elements. Try either of these alternatives:
$(element).siblings('.removeThis').remove();
$(element).siblings().remove('.removeThis');
Try
$(element).parent().find('.removeThis').remove()