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);
Related
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 have the following structure:
<div id="accord1_1" class="panel-collapse collapse">
<div class="panel-body">
<div id="Dashboard">
<div id="DashboardFlow">
<div class="dashboard-caps">
<div class="dashboard-info">
<a class="save" onclick="return saveChanges();" href="#">Save</a>
When clicking on Save button i would like to get the parent div that is like accord%_1. I'll explain myself better:
I have like 30 structures like the one i've shown created. All of them are exactly the same except from the id="accordX_1" key which is id="accord1_1" in the first collapsable panel, id="accord2_1" in the second and so on.
What i need to do is get that id's value.
How can this be done?
Regards,
Use closest and the startsWith selector
$('.save').click(function(){
var targetId = $(this).closest('div[id^=accord]')[0].id;
});
This will find the first matching parent element in the list of parent elements for the element with class=save, access the matched native element with [0], and the native .id property.
Just find the closest div on clicking save
$("a.save").click(function(){
var curr = $(this).closest("div.panel-collapse[id^=accord]") // Is the div you want;
var id = curr.attr("id");
});
<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().
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
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.