I have parent div id, this parent have 3 children, each child have their own children. This is tree like structure. What I want is select to select second child on level one.
currently i am doing like this
var Second_child = $('#Parent_id:nth-child(2)');
But it is not selecting the child. I don't want to use eq() function.
You need to use child selector here
var Second_child = $('#Parent_id > :nth-child(2)');
If you use descendant selector 2nd child in every level will get selected
Your selector tries to find an element with id Parent_id which is the second child of its parent
Related
I want to remove the bootstrap child classes row from the parent element .But not working for me showing the errors.
the code is
if(document.getElementById(v)){
console.log(v)
document.getElementById("mapper").removeChild(document.getElementsByClassName("row"))
//document.getElementById("mapper").classList.remove('row');
}
Considering element with id="mapper" is your parent element and you want to remove children's row class. Try this :
var mapper = document.getElementById("mapper").children;
for(i=0; i<mapper.length;i++) {
mapper[i].classList.remove("row")
}
I want to check classname which the closest parent of the clicked element in angular 6?
HTML
<div class="parent-element selected" (click)="checkClass($event)">
<ul>
<li><a>Link-1</a></li>
<li><a>Link-2</a></li>
<li><a>Link-3</a></li>
</ul>
</div>
ANGULAR
checkClass(element) {
return element.target.classList.contains('selected');
}
if I check the classname by using "checkClass" function, it doesn't always give the right result, because there is a possibility of clicked element other than a parent. So I want to first find the closest parent of the clicked element and than check the classname. How can I do that?
$event.target.parentNode; will give you parent element.
you can get parent element by this:
$event.target.parentElement
and all the class list by this:
$event.target.parentElement.classList;
I have an object that was retrieved from this expression:
const element = document.querySelector("...my selector...");
I need to get all child elements that have certain attributes, The only way I know to get all children is by:
const children = Array.from(element.childNodes);
but now each child in children is not an element, rather a node, hence, I cannot use getAttribute('') on them;
How do I "cast" a Node to an Element?, Or is there a better way to do this?
How do I "cast" a Node to an Element?
You can't.
Elements are a subset of Nodes.
If it isn't an Element already, then you can't turn it into one.
Consider:
<div>Hello, <strong>World</strong></div>
You have two child nodes. The text node "Hello, " and the strong element node.
It doesn't make sense to treat "Hello, " as an element.
Consider using children instead of childNodes. It fetches only element children.
I need to get all child elements that have certain attributes
In that case, you're probably better off just using a selector which gets you that in the first place. You'll need a child combinator and an attribute selector in addition to your existing selector. Then you'll need to use All to get more than one result.:
document.querySelectorAll("...my selector... > [someAttribute]"
You said you want to select all children with a specific attribute. So select them with querySelectorAll using an attribute selector.
var elems = document.querySelectorAll("#theParentSelector > [theChildsAttribute]")
console.log(elems.length)
Array.from(elems).forEach( function (el) {
console.log(el.getAttribute("theChildsAttribute"))
});
<div id="theParentSelector">
<div theChildsAttribute="1">Foo 1</div>
<div>Bar</div>
<div theChildsAttribute="2">Foo 2</div>
<div theChildsAttribute="3">Foo 3</div>
</div>
You'd use children to gain access to all HTML based nodes:
document.querySelector("...my selector...").children
I am trying to get the parent <li> when I click on a specific <li> item.
http://jsfiddle.net/doonot/GjbZk/
So let's say I click on submodule 1, I get the clicked ID with $(this).attr('id');
How can I now get the ID of the parent <li> which is in this case module 1?
Please note that my tree is quite big, so it has to be flexible.
Thanks a lot, much appreciate your answer.
You can use the closest method to get the first ancestor that matches a selector:
var li = $(this).closest("li");
From the jQuery docs:
Get the first element that matches the selector, beginning at the
current element and progressing up through the DOM tree.
var parentModule = $('this') //the selector of your span
.parents('li:eq(1)') //get the next li parent, not the direct li
.children('.rightclickarea:first') //get the first element, which would be the span
.attr('id') //get the span id
var parent = $(this).closest("li");
I have this javascript code which works fine
var QuestionID = panel.siblings('.QuestionIDWrapper').children('input[type=hidden]').val();
but if I convert it to use a multi level jQuery selector like this:
var QuestionID = panel.siblings('.QuestionIDWrapper input[type=hidden]').val();
I don't get any value in QuestionID.
Have a look at the docs: http://api.jquery.com/siblings/
You didn't provide the actual markup, but I assume that while .QuestionIDWrapper is a silbing, input[type=hidden] is not a direct silbing, only a silbings child. (and not matched therefore)
The second one will only select a sibling of panel if it matches the provided selector. Since your input is a child of one of panel's siblings, then it is not at the same level (not a sibling).
.QuestionIDWrapper input[type=hidden] - for this to work input element must be
immidiate child of QuestionIDWrapper class element.
You are using : Descendant Selector (“ancestor descendant”)
Where as in the first one you are seching for the childer elemtn with the specific selector.