We Keep Coding

querySelector syntax for nested elements

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>

jquery custom data attribute not working inside div tag

I am using this div code
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
and trying to print the values like
japp.init = function () {
console.log($("div").data("role"));
console.log($("div").data("lastValue"));
console.log($("div").data("hidden"));
console.log($("div").data("options").name);
});
This works fine if I put the above div tag directly inside body but as I put the div tag inside any other div tag it does not work and says undefined.
<div class="page">
<div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
console prints undefined for above html.
Please let me know if anything is not clear

When getting data jQuery returns data from the first element matching selector, if the first div in DOM has no data - jquery won't return it.
try
japp.init = function () {
console.log($("div[data-role]").data("role"));
console.log($("div[data-lastValue]").data("lastValue"));
console.log($("div[data-hidden]").data("hidden"));
console.log($("div[data-options]").data("options").name);
});
or better give this div an id, and select by id like $('#someid').data('role')

Your selector is div and when you have more divs on your page jQuery will select (in this case) the first one.
<div class="page">
<div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
In the above HTML the first div does not have data-* so it will result with an undefined value
You have to be more specific with your selectors
$('.page div').data('role')
Or
$('div:first div').data('role')

Try
$("div.page div").each(function(){
console.log($(this).data("whatever_you_need"));
});
etc.
This way you will cycle through all divs nested in div with class 'page'.

You aren't exactly specifying which div to get. Whenever you are trying to get specific data from a specific element, you should be sure which div you are accessing. This can either occur within an iteration of elements or by ID or an element in relation to an ID. It shouldn't be done based on tagname or even classname as they can be multiple. In this case, why not add an ID on the div you are trying to get so you can access it specifically:
<div class="page">
<div id="thisDiv" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
Then access:
console.log($("#thisDiv").data("role"));
Also, it is bad for performance to wrap the same jquery object over and over, you can cache it like this:
$thisDiv = $("#thisDiv");
console.log($thisDiv.data("role"));
....

I believe it is because $("div") returns all occurrences of div and then selects the first to perform a function on. I'm not sure how you want to use this functionality but it might be worth considering something like this
JSFiddle where a class is used to select the correct div
$(function(){
console.log($(".div").data("role"));
console.log($(".div").data("lastValue"));
console.log($(".div").data("hidden"));
console.log($(".div").data("options").name);
});

give your Div a class like class="myClass"
<div class="page">
<div class="myClass" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
and then you can change your jquery selector:
japp.init = function () {
console.log($(".myClass").data("role"));
console.log($(".myClass").data("lastValue"));
console.log($(".myClass").data("hidden"));
console.log($(".myClass").data("options").name);
});
otherwise jquery don't know which div you are looking for.
I hope this will help

how do i get div childs from jquery/javascript in this example?

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

Hiding many divs with one onclick function

I am looking for a Javascript solution for this problem. I have the following HTML:
<div id = "container">
<div id = "data">
<div>
<h3> Address</h3>
<b>Expand...</b>
<div id="content">ul. Pomorska</div>
</div>
<div>
<h3> Telefon </h3> <b>Expand...</b>
<div id="content">26565352</div>
</div>
<div>
<h3>Email</h3>
<b>Expand...</b>
<div id="content">asdasdag#aga.com</div>
</div>
</div>
</div>
I would like to hide the content div when an onclick Expand is made. So far I have made a function which hides the content divs and tries to assign an event handler to the node.
function hideinfo() {
var node = document.getElementById("data");
var contactdata = node.getElementsByTagName("div");
for(var i=0; i<contactdata.length;i++) {
if(contactdata[i].id == "content") {
alert(contactdata[i].previousSibling.innerHTML);
contactdata[i].previousSibling.addEventListener('click',ShowHide,false);
contactdata[i].style.display="none";
}
}
}
The problem is that the alert displays undefined. Why can't it see the node? Is there a better way to do this in Javascript?

Because previousSibling is most likely the text node before the div element. You probably want to use previousElementSibling instead :)
In most browser today, querySelectorAll, which lets you use CSS selectors for finding elements, is also a good alternative (IE8+)

The previousSibling property returns the previous sibling node (the previous node in the same tree level) of the selected element
which returns in your case the TEXT node.
As you can see in this jsfiddle: http://jsfiddle.net/Xu383/
alert(contactdata[i].previousSibling.nodeName);
You are better of using the querySelectorAll.
Also you can't have multiple divs with the SAME id, use class instead.

How to find first parent element in jquery

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.