I need to access the DOM tree and get the elements just 1 level below the current element.
Read the following code:
<div id="node">
<div id="a">
<div id="aa">
<div id="ab">
<div id="aba"></div>
</div>
</div>
</div>
<div id="b">
<div id="ba">
<div id="bb">
<div id="bba"></div>
</div>
</div>
</div>
<div id="c">
<div id="ca">
<div id="cb">
<div id="cba"></div>
</div>
</div>
</div>
</div>
I want to get the 3 elements "a", "b", "c" under "node". What should I do?
var nodes = node.getElementsByTagName("div") <---- I get all the divs but not the 3 divs I need.
var nodes = node.childNodes; <---- works in IE, but FF contains Text Node
Does anyone know how to solve the problem?
You could use a function that rules out all non-element nodes:
function getChildNodes(node) {
var children = new Array();
for(var child in node.childNodes) {
if(node.childNodes[child].nodeType == 1) {
children.push(child);
}
}
return children;
}
I'd highly recommend you look at JQuery. The task you're looking to do is straightforward in pure Javascript, but if you're doing any additional DOM traversal, JQuery is going to save you countless hours of frustration. Not only that but it works across all browsers and has a very good "document ready" method.
Your problem solved with JQuery looks like:
$(document).ready(function() {
var children = $("#node").children();
});
It looks for any element with an id of "node" then returns its children. In this case, children is a JQuery collection that can be iterated over using a for loop. Additionally you could iterate over them using the each() command.
This is simplier than you think:
var nodes = node.querySelector("node > div");
Try this (late answer, but can be useful for others):
var list;
list=document.getElementById("node").querySelectorAll("#node>div");
Universal selectors can do the trick:
var subNodes = document.querySelectorAll("#node > *");
Query parts:
#node is unique container selector
> next slector should be applied only on childs
* universal selector that match every tag but not text
Can I use universal selector
In my opinion the easiest way to do this is to add a class name to the
first level child nodes:
<div id="node">
<div id="a" class="level_1">
<div id="aa">
<div id="ab">
<div id="aba"></div>
</div>
</div>
</div>
<div id="b" class="level_1">
<div id="ba">
<div id="bb">
<div id="bba"></div>
</div>
</div>
</div>
<div id="c" class="level_1">
<div id="ca">
<div id="cb">
<div id="cba"></div>
</div>
</div>
</div>
</div>
and then to use the method getElementsByClassName, so in this case:
document.getElementById('node').getElementsByClassName('level_1');
I think node.childNodes is the right place to start. You could (to make it work with FF too), test the nodeName (and possibly nodeType) of all child nodes you get, to skip text nodes.
Also you might have a look at some javascript library like prototype, which provide a lot of useful functions.
I've added some text so we can see that it is working, and JavaScript that will add "added!" to the bottom of each of the divs at the base:
var cDiv = document.querySelectorAll('body > div > div'), i;
for (i = 0; i < cDiv.length; i++)
{
cDiv[i].appendChild(document.createTextNode('added!'));
}
<div id="node">
<div id="a">a
<div id="aa">aa
<div id="ab">ab
<div id="aba">aba</div>
</div>
</div>
</div>
<div id="b">b
<div id="ba">ba
<div id="bb">bb
<div id="bba">bba</div>
</div>
</div>
</div>
<div id="c">c
<div id="ca">ca
<div id="cb">cb
<div id="cba">cba</div>
</div>
</div>
</div>
</div>
Related
So I have something like this in my html:
<div id="basket">
<div id="item">Apple</div>
</div>
<div id="basket">
<div id="item">Orange</div>
</div>
<div id="basket">
<div id="item">Banana</div>
</div>
// And so on
How would I be able to change the innerHTML of each 'item' div individually?
For example, how would I change the div that says 'banana' to something else?
As already mentioned within the comments, an ID has to be unique so you have to change them to classes.
Then to solve your issue, you can use querySelectorAll to select all elements with the class item. Then you sue the forEach-loop and check the innerHTML of every Element. if it matches "Banana" you can rewrite the innerHTML (should use textContent though for security reasons):
document.querySelectorAll('.item').forEach(el => {
if (el.textContent == 'Banana') {
el.textContent = 'The Minions ate the Banana';
}
})
<div class="basket">
<div class="item">Apple</div>
</div>
<div class="basket">
<div class="item">Orange</div>
</div>
<div class="basket">
<div class="item">Banana</div>
</div>
I am trying to refactor and make a performance wise code.
The idea of the code is to update the id or value of all element with id or value that needs to be updated that happens when an element has been removed / deleted
So what I am trying to do is get all element with Id or value inside a container element (which is possible to be nested in 2 to 4).
At the moment, I am using jQuery to this task. I added a class on every element that has Id and use jQuery .find() to get all of this element using the class I've assign to them .. which is I really hate about my code and wanted to change as well if there's another best way to do it.
So is there a fastest way and performance wise at the same time to do this task?
$("button").on("click", function(){
$($(this).val()).remove();
updateParagraph();
});
function updateParagraph() {
$(".paragraphs").each(function(index, data){
var dataId = data.id.split("-");
var idIndex = dataId[dataId.length-1];
var index = index + 1;
if (index != idIndex) {
dataId.splice(-1, 1);
dataId.push(index);
dataId = dataId.join("-");
$(this).attr("id", dataId);
setChildElementsId($(this), index)
}
});
}
function setChildElementsId(parent, inx) {
$(parent).find(".id-holder").each(function(index, data){
if (data.id) {
var dataId = data.id.split("-");
dataId.splice(-1, 1);
dataId.push(inx);
dataId = dataId.join("-");
$(this).attr("id", dataId);
if(isParagraph(data.tagName)) {
$(this).text(inx);
}
}
else if (data.value) {
var dataValue = data.value.split("-");
dataValue.splice(-1, 1);
dataValue.push(inx);
dataValue = dataValue.join("-");
$(this).val(dataValue);
}
});
}
function isParagraph(tagName){
return tagName == "P";
};
<div id="container-1" class="paragraphs">
<div id="header-container-id-1" class="id-holder">
<h4>Header</h4>
</div>
<div id="paragraph-container-id-1" class="id-holder">
<p id="id-1" class="id-holder">1</p>
</div>
<button value="#container-1" class="id-holder">delete</button>
</div>
<div id="container-2" class="paragraphs">
<div id="header-container-id-2" class="id-holder">
<h4>Header</h4>
</div>
<div id="paragraph-container-id-2" class="id-holder">
<p id="id-2" class="id-holder">2</p>
</div>
<button value="#container-2" class="id-holder">delete</button>
</div>
<div id="container-3" class="paragraphs">
<div id="header-container-id-3" class="id-holder">
<h4>Header</h4>
</div>
<div id="paragraph-container-id-3" class="id-holder">
<p id="id-3" class="id-holder">3</p>
</div>
<button value="#container-3" class="id-holder">delete</button>
</div>
<div id="container-4" class="paragraphs">
<div id="header-container-id-4" class="id-holder">
<h4>Header</h4>
</div>
<div id="paragraph-container-id-4" class="id-holder">
<p id="id-4" class="id-holder">4</p>
</div>
<button value="#container-4" class="id-holder">delete</button>
</div>
<div id="container-5" class="paragraphs">
<div id="header-container-id-5" class="id-holder">
<h4>Header</h4>
</div>
<div id="paragraph-container-id-5" class="id-holder">
<p id="id-5" class="id-holder">5</p>
</div>
<button value="#container-5" class="id-holder">delete</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If I understand your question correctly, you're looking to more elegantly identify which elements have an id of the form "__-id-#" or simply "id-#".
If this is the case, take a look at some more advanced jQuery selectors. One in particular which might meet your needs is the Attribute Contains Selector.
For instance, I think $(parent).find("[id*='id-']") might do what you're looking to do.
While I understand what you're attempting to do, I don't quite understand why you're doing this in the first place.
Unless there are restrictions that force you to structure your HTML like you did, well, don't. Aim for the simplest structure:
<div id="container-123" class="paragraphs">
<h4>Header</h4>
<p>1</p>
<button type="button">delete</button>
</div>
Remove the <div>s around the <h4> and the <p> unless you need them for some styling reason. The <button> doesn't need to know its ID, because it's a child element of the container, so you're delete handler could make use of that fact:
$(document.body).on("click", "button", function() {
$(this).closest('.paragraphs').remove();
});
If there are outside forces that require a specific ID (e.g. for linking to an anchor), keep that on the top container element. If your CSS targets elements by ID, refactor the CSS.
I would like to answer your question using javascript. In fact you don't need any of those id-s
I hope I'm not too late.
let buttons = Array.from(document.querySelectorAll(".id-holder"));
buttons.forEach(b => {
//for each button add an event listener
b.addEventListener("click", () => {
b.parentElement.parentElement.removeChild(b.parentElement);
resetNums();
});
});
function resetNums(){
// reseting the text inside the p
let btns = Array.from(document.querySelectorAll(".id-holder"));
btns.forEach((bt,i)=>{
let theP = bt.parentElement.querySelector("p");
theP.innerHTML = i+1;
})
}
<div>
<div>
<h4>Header1</h4>
</div>
<div>
<p>1</p>
</div>
<button class="id-holder">delete</button>
</div>
<div>
<div>
<h4>Header2</h4>
</div>
<div>
<p>2</p>
</div>
<button class="id-holder">delete</button>
</div>
<div>
<div>
<h4>Header3</h4>
</div>
<div>
<p>3</p>
</div>
<button class="id-holder">delete</button>
</div>
<div>
<div>
<h4>Header4</h4>
</div>
<div>
<p>4</p>
</div>
<button class="id-holder">delete</button>
</div>
<div>
<div>
<h4>Header5</h4>
</div>
<div>
<p>5</p>
</div>
<button class="id-holder">delete</button>
</div>
Wow, so that's a mouthful. I've been struggling with this as I'm still a newbie with JQuery selectors. Any help with this will be greatly appreciated. I have a situation where I'm selecting a sub-set of child div (class='B') from a parent div (id='A') using .children() and .slice(). Furthermore, I need to copy the value of longdesc attribute of each grandchild div (class='C') to its div content. I was thinking of something like below, but I don't know how to reference the correct grandchild div when trying to obtain the value of the longdesc. Maybe there's a better approach to this? HELP!
HTML:
<div id="A">
<div class="B">
<div class="C" longdesc="value1"></div>
</div>
<div class="B">
<div class="C" longdesc="value2"></div>
</div>
<div class="B">
<div class="C" longdesc="value3"></div>
</div>
<div class="B">
<div class="C" longdesc="value4"></div>
</div>
</div>
JQuery:
$start = 0;
$end = 2;
$('#A').children().slice($start, $end).find('.C').html("??value of longdesc??");
Output:
<div id="A">
<div class="B">
<div class="C" longdesc="value1">value1</div>
</div>
<div class="B">
<div class="C" longdesc="value2">value2</div>
</div>
<div class="B">
<div class="C" longdesc="value3">value3</div>
</div>
<div class="B">
<div class="C" longdesc="4"></div>
</div>
</div>
Many thanks in advance!
Use the version of .html() that take a function as parameter..
$('#A').children().slice($start, $end+1).find('.C').html(function(){
return $(this).attr('longdesc');
});
Demo at http://jsfiddle.net/aaFt9/1/
You also need to use $end + 1 to match the value3 because slice second argument is up-to but not including it (see Array.prototype.slice() docs at MDN)
Additionally if that is your real html structure, you can skip the .children() and find the .C elements directly..
$('#A').find('.C').slice($start, $end+1).html(function(){
return $(this).attr('longdesc');
});
Demo at http://jsfiddle.net/aaFt9/2/
$("#A").find(".B").children().each(function(){
$(this).html($(this).attr('longdesc'));
});
Fitting in the .slice() should not be a problem, wherever you want.
Try
$(".C").html(function () {
return $(this).attr("longdesc")
});
JSFIDDLE
EDIT : re-reading the question, you could try
var $end = 2;
$(".C").each(function (i) {
i <= $end ? $(this).html(function () {
return $(this).attr("longdesc")
}) : null;
});
JSFIDDLE
Sorry for the poor title, I'm not sure how to word this issue.
I need some help writing a jQuery or javascript selector to get every childBlock that isn't the first. There are N number of parentBlock divs with at least one childBlock div child. We would like to change some of the labels for every subsequent child div after the first. What is the most efficient way to select these elements?
<div class="parentBlock">
<div class="elementHead">
</div>
<div class="elementBody">
<div class="childBlocks">
<div class="childBlock" id='1'>
</div>
<div class="childBlock" id='2'>
</div>
<div class="childBlock" id='3'>
</div>
<div class="childBlock" id='4'>
</div>
...
</div>
</div>
<div>
<div class="parentBlock">
<div class="elementHead">
</div>
<div class="elementBody">
<div class="childBlocks">
<div class="childBlock" id='5'>
</div>
<div class="childBlock" id='6'>
</div>
<div class="childBlock" id='7'>
</div>
<div class="childBlock" id='8'>
</div>
...
</div>
</div>
<div>
So in the example above, I would like to select childBlocks with an id of 2, 3, 4, 6, 7, 8. In my actual code, these div's don't have an id, they are just classed if that makes a difference at all.
I've tried:
$(".parentBlock").find(".childBlock").not(':first').find('label.category ').text("Subcategory");
But it seems to find the first childBlock on the screen, skip over it, then apply the text change to every other childBlock div that it finds.
Thoughts, or suggestions?
You were very close. You want first-child, not first:
http://jsfiddle.net/pMYWS/
$(".parentBlock").find(".childBlock").not(':first-child').text("Subcategory");
(I am assuming that label.category is something present in your real code that isn't shown in this demo snippet)
what about something like this?
$(".childBlocks:not(:first-child)") (do something here)
I am making bunch of elements that look like the same
I have
<div id="e1" class="e1">
<div class=box>
<div class='b1'></div>
<div class='b2'></div>
<div class='b3'></div>
<div class='b4'></div>
</div>
<div class='e11'></div>
<div class='e12'></div>
<div class='e13'></div>
<div class='e14'></div>
<div class='e15'></div>
...more elements
<div>
<div id="e2" class="e2">
<div class=box>
<div class='b1'></div>
<div class='b2'></div>
<div class='b3'></div>
<div class='b4'></div>
</div>
<div class='e11'></div>
<div class='e12'></div>
<div class='e13'></div>
<div class='e14'></div>
<div class='e15'></div>
...more elements
<div>
They are almost the same and I have several e3 and e4 div...
MY question is if there are anyways to reduce the codes and create them in js with an object (or better approach).
Would anyone gives me a hint? Thanks a lot!
jsFiddle Demo
You are going to need to get some iteration parameters, and then make a function which iterates based on those parameters to create these html elements. The primary way do create an html element is
document.createElement("tagname");
and then you are going to need to append them in the order you wish. Once they are done, you can append them to an element on the screen. Avoid appending inside of a loop. Even if you create a lot of elements, they will render quickly if they are only appended onto the screen once instead of each time an element is created.
Here is a simple example:
<div id="contentZone"></div>
<script>
var c = document.getElementById("contentZone");
var content = document.createElement("div");
for( var i = 0; i < 3; i++ ){
var d = document.createElement("div");
d.innerHTML = i + ") Hello :D";
content.appendChild(d);
}
c.appendChild(content);
</script>