<div class='1'>
<div class='2'>
<div class='3'>
</div>
</div>
</div>
query('.1').children() // returns [<div class='2'></div>]
Is is possible to access 3rd level children by using query().children() instead of using something like query('.1 .2 .3')?
Basically, I would like to access all children of the current element without hard-coding its Id, e.g. query('#foo .3')
You could use:
element.querySelectorAll('div') to get all <div> children of element
element.querySelectorAll('[class]') to get all children of element that does have a class attribute
document.querySelectorAll('div[class]') for the whole html document
You can use any CSS selector as a parameter for querySelectorAll().
Related
Let's say I have
<iframe> id="iframeid"
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</iframe>
Is there a way to add unique Id's to the divs using javascript?
For example
<iframe> id="iframeid"
<div>id="divid1"</div>
<div>id="divid2" </div>
<div>id="divid3" </div>
<div>id="divid4" </div>
</iframe>
You can return all the div elements with document.getElementsByTagName. This return a NodeList (of div in this case) that you can access with bracket notation (or item method, it's the same) that return the Element Node. You can set its attribute id with .id=value or setAttribute(id,value). In my example I set the div elements with id=id0 id=id1 and so on.
let myDivs = document.getElementsByTagName("div");
for(let i=0 ; i<myDivs.length ;i++)
myDivs[i].id = `id${i}`;
Furthermore note that document.getElementsByTagName("div") returns all the div in the page, if you want only the div of an element, for instance an iframe element with id=myiframe you can do:
document.getElementById("myiframe").getElementsByTagName("div");
Also note that this method detects all the div in the subtree, it is not limited to direct children
I'm trying to get the div element that's nested deep within another div, but can't get the CSS Selector string to work.
The div I want does not have a unique identifier, but resides deep within another div that has. I've gotten that top level div, but have no clue how to get the nested one.
DOM:
var obj = document.body.querySelector('.qvobject[data-qlikobjectid="XFvnjF"]');
console.log(obj);
var cont = obj.querySelector('.kpi-value');
console.log(cont);
<div class="qvobject" data-qlikobjectid="XFvnjF">
<div>
<div>
<div class="kpi-value">I WANT THIS</div>
</div>
</div>
</div>
The result is that "obj" is the right object, but "cont" is null, so it can't find it.
You can select it using the child selector. Just put a space between the parent selector and the child selector.
This makes the traverser go further to any level in the dom to select the desired element.
var element = document.querySelector('.qvobject[data-qlikobjectid="XFvnjF"] .kpi-value');
console.log(element);
<div class="qvobject" data-qlikobjectid="XFvnjF">
<div>
<div>
<div class="kpi-value">I WANT THIS</div>
</div>
</div>
</div>
i'm trying to access to the div's child by using jquery's .eq() function, but it looks like something's wrong, despite the fact is not throwing an error, looks like when i do a .innerHTML to the desired child div element, nothing happens.
This is my HTML:
<div id="status_container">
<div class="status_item_wrapper">
<div class="status_item_title">
<span>TITLE 1</span>
</div>
<div class="status_item_content">
<table id="box-table"></table>
</div>
</div>
<div class="status_item_wrapper">
<div class="status_item_title">
<span>TITLE 2</span>
</div>
<div class="status_item_content">
<table id="box-table"></table>
</div>
</div>
</div>
And this is my javascript:
function doSomething(message) {
var data = message.data;
var index_container = 0;
var container = $("#status_container").eq(0);
var content_wrapper = container.eq(1); // this would be the content div of each child
content_wrapper.html(JSON.stringify(data));
}
I thought this would get the "TITLE 1" status_item_wrapper div, and then, content_wrapper would contain the "status_item_content" object.
How am i supposed to reach the "status_item_content" div from the very first parent "status_container"?
Thanks.
content_wrapper is a jQuery object, as that is what eq() returns, and does'nt have an innerHTML method, you should use jQuery's html() :
content_wrapper.html( JSON.stringify(data) );
to return the native DOM element instead, you can use get(), and do :
var content_wrapper = container.get(1);
content_wrapper.innerHTML = JSON.stringify(data);
EDIT:
Now that you've added container, there are some issues. eq() will get a certain element in a collection of elements based on a zero based index, and you're using an ID as a selector, so there should'nt really be a collection, as ID's are unique, and should only select one single element.
If you're trying to select the second child inside the #status_container element, you'd do
var content_wrapper = $("#status_container").children().eq(1);
Conside below html -
<div class="container1">
<div class="container2">
<div class="container3">
<div class="container4">
<div class="element">
...
</div>
</div>
</div>
</div>
if I want to get <div class="element"> element and I have reference to the container1. In jquery what I do is,
$(".container1").find(".element")
instead of -
$(".container1").children().children().children().find(".element")
This is process to find any child element when I have reference to any of the parent element. But instead when I have reference to a child element and want to get parent element then every time I have to go one level up -
$(".element").parent().parent().parent().parent()
and I can't do like this -
$(".element").findParent()
I have not come across any method like findParent() in jquery. Is there which I am not aware of? Or is it not there for some reason?
$(".element").parents();
will give all parents of .element(including html and body)
DEMO
To find any specific parent, suppose container1 then
$('.element').parents('.container1')
DEMO
jQuery .parents() generally find all parents, but if you passed a selector then it will search for that.
just use
$(".element").closest('#container1');
if no ancestor with that id is found then
$(".element").closest('#container1').length will be 0
To get the first parent personally I use the following construction:
var count_parents = $(".element").parents().length;
$(".element").parents().eq(count_parents - 1);
Hope, it will be helpful for someone.
I have a big div wit a lot of smaller divs within it. Say,
<div id="parent">
<div id="child1">
</div>
<div id="child1">
</div>
<div id="child2">
</div>
<div id="child1">
</div>
<div id="child1">
</div>
</div>
If I'm currently at the last 'child1', how dow I get to the top most child1 with prev()? For me it breaks when it reaches 'child2'.
First of all your HTML markup is invalid. There shouldn't be more that one element with the same ID in a document.
Read Element identifiers: the id and class attributes
id:
This attribute assigns a name to an
element. This name must be unique in a
document.
class:
This attribute assigns a class name or
set of class names to an element. Any
number of elements may be assigned the
same class name or names. Multiple
class names must be separated by white
space characters.
You can use the parent and :firstchild to get the first element inside your current parent element.
You can use something like this if you are currently at any child of element 'parent'
$(this).parent().find("div:first-child");
I think you want this:
$(this).prevAll('.child1').eq(0);
$(this).closest('.parent').find('.child1:first')
I changed to classes, because you really should only ever have one element of any given ID in a page