I have a recursive function that creates divs inside divs on demand by the user, but I've stumbled on a problem where I need to separate those divs as in a specific manner, similar to "layers".
Example:
I have created a div, firstborn - and inside it, the user created another div (lets call this one child div). Inside this secondary div, the user created yet another div (and this one grandchild div) - I need to know the number of child divs of the firstborn div, and the number of child divs that the child div has (grandchild divs)
I've stumbled upon this issue because the way I was trying to get them was by:
numberOfFirstbornDivs = document.getElementsByClassName("firstBornDiv").length
numberOfChildrenDivs = document.getElementsByClassName("recursivelyCreatedDiv")[index].getElementsByClassName("recursivelyCreatedDiv").length
What I wanted was the number of divs named "recursivelyCreatedDiv" only under the first "layer", but instead, I get the number of divs from all subsequent "layers" (in the given example I wanted to have:
numberOfFirstbornDivs = 1 and
numberOfChildrenDivs = 1,
but instead I get:
numberOfFirstbornDivs = 1 and
numberOfChildrenDivs = 2).
I understand this happens because I name my divs by the same ClassName, but I don't know how to workaround this as they are created recursively (and on demand by the user).
To only select direct childs of an element you can use the '>' css selector instead of getting elements by class name.
For example, .firstBornDiv > .recursivelyCreatedDiv will target all elements with the recursivelyCreatedDiv class that are direct children of a div with the firstBornDiv class
Edit 1: To be more precise, you can use the querySelectorAll() method with any css selector to get the array of elements targeted by your selector which is what you would need with this answer.
Related
URL==> http://demo.guru99.com/test/login.html
I use the above url for testing purpose
i try to find the web element using parent and child function in xpath,but child and parent function give me an same result,i use the below command
parent function==> $x("//div[#class='container-fluid']//parent::div")
child function==> $x("//div[#class='container-fluid']//child::div")
Observe that i use the same web element and try to fing it's parent and child element but after running the above cmd i get the similar result
Execute the cmd in cosole tab
How can have same element as a parent as well as child for particular web element
Please help in above and if not clear the question let me know i try to more describe the question
Thank you in advance
Breaking it down:
//div[#class='container-fluid']//parent::div
// select the root and all of its descendants
div[#class='container-fluid'] from all of the nodes selected in step 1., select all child div elements with an attribute class equal to 'container-fluid'
// select all nodes selected in step 2 and all of their descendants
parent::div starting from the nodes selected in step 3, select all parents of those nodes that are div elements
//div[#class='container-fluid']//child::div
// select the root and all of its descendants
div[#class='container-fluid'] from all of the nodes selected in step 1., select all child div elements with an attribute class equal to 'container-fluid'
// select all nodes selected in step 2 and all of their descendants
child::div starting from the nodes selected in step 3, select all children of those nodes that are div elements
So the reason you are getting the same result in both cases is because the div you are locating is a parent of one of the nodes selected in step 3 and a child of one of the nodes selected in step 3.
If you are just trying to select the parent or child of the container-fluid div, then get rid of the double slashes:
//div[#class='container-fluid']/parent::div
//div[#class='container-fluid']/div
The child:: axis is redundant most of the time and can be omitted in this case as I have done above.
Hey I am currently on a project where I need to find a match for a combination of two elements efficiently. The elements have the following properties:
name
parent element
group
A group can have a parent group as well.
A match can happen with the following combinations (ordered by priority):
element - element
element - parent element
parent element - parent element
element - category
parent element - category
element - parent element category
category - category
parent element category - parent element
category - parent element category
parent element category - parent element category
Currently I implemented this using a MySQL database. But in the worst case scenario, where there is no match at all, it'll run a lot of queries and therefore is slow.
I was wondering if there is a better data structure to store these kind of hierarchies? I took a look into graphs, but I am not sure if this fits for this scenario.
I have a construction as below:
parent
+ child
+ child
+ child
+ sub-parent
+ sub-child
+ sub-child
For now, I use multiply of "removeChild()", to remove elements from scene one by one. Like this:
removeChild(sub-child);
removeChild(sub-child);
removeChild(sub-parent);
//and so on
It's okay, but I found out that if I remove a parent all its children will disappear from scene too. (For now I do not know for sure ...)
How do you remove elements from a scene in the correct way ? As I do it now (one by one), or I could remove just a parent and my code will be a little bit shorter. Or is it the same thing?
Removing a display object from the stage will also remove all of that object's children. Think of it as a container that holds those children object. If you remove the container, you also remove the objects inside of it.
However, if you still have references to those children objects, or have event listeners attached to them, they won't be garbage collected (they will stick around in memory executing any code associated with them). So you still need to make sure you clean up everything when you remove the parent object.
The "display list" is a tree structure that looks like this:
When you add children to a container (DisplayObjectContainer), those children will remain as children of that container unless they are specifically removed from it.
When a container or DisplayObject is attached to the stage, they will render. If the object is a container, all of its descendants (children, children of children and so on) will also render.
If you remove an object from the stage, it and all of its descendants will stop rendering but their existing parent/child relationships remain in tact. This means if you add a container with children to the stage again, all of those children will begin to render again as well.
So to more accurately answer your question: removing a container does not actually remove its children. The children will not have a connection to the stage and will not render, but they are still children of the container.
With all that said, there is not often a reason that you would need to remove each individual child from a container. So long as the children do not have event listeners attached or are not referenced by the main application in any other way, they will all be eligible for garbage collection when their connection to the stage is severed. Removing the topmost possible container from the stage is perfectly normal.
You can remove the "sub-parent" and its child's will be removed as well from the scene (stage).
In one of my pages, I am using an example of editable html table from this link: http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425, which works without any issues and when I click on a cell in the table, it changes it to text box.
However, I had to change the layout of my page where, I had to place the sample mentioned above within another html table (nested).
Now the problem is when I click on the cell, it does not identify the child table, which has the data and I want to click but it clicks on the cell of the parent table, which in this case is the parent table, and holds 2 different tables.
So, what I want you help with is:
Get a method to identify the cell of the child table when it is clicked
Or
Some way so align two tables on my page to be aligned side by side. Currently I am using the parent table to align my other 2 tables to sit side by side.
if the second option is easier to achieve then, I don't have to change much.
Any suggestions?
If you're using a parent table element to layout elements on your page, just know that this is a deprecated unsemantic practice, as table elements are for tabulating data. You should use the CSS float property, which is the convention, see CSS Floats 101 ยท An A List Apart Article and w3schools.com
Refactoring out that parent table should fix your problem. Otherwise you can fix it through modifying the selector in your JavaScript and by assigning the edittable td elements with a class (eg. edittable-cell) so you're not assigning event listeners to other tables' td elements unnecessarily and causing unwanted behaviour elsewhere.
JavaScript
// Instead of the 'td' selector
$("td").dblclick(function() {
// .. your code here
});
// Use a more specific selector, eg.:
$('.edittable-cell').dblclick(function() {
// .. your code here
});
If you are semantically nesting tables of data and/or still have this issue, you can try preventing the event from bubbling up to its parent elements.
JavaScript
$(".edittable-cell").dblclick(function(event) {
event.stopPropagation();
// .. your code here
});
I created a method and pass the element type, id, and any inner text that instantiates a new html element. The last statement: Me.Controls.Add(element) adds it to the end of the page, but I would like it to be inserted in a specific position (between 2 divs within a form). What I am describing is very similar to this post on SO here, although it was for javascript.
Perhaps look at using a PlaceHolder control..