Get child-element from nested div - javascript

I have a div-structure like this:
<div id="company1">
<div class="space m-d p-r s-t">
<div class="zzr">
<div class="myTemplate">abc123</div>
</div>
</div>
</div>
I want to get the content form the class "myTemplate" over my "id"-div "company1"
Is it necessary to call all classes in my selector? Would be not good becaus of responsive design, the classes will change. So I woul prefer to call the "#company1" and then directly the "myTemplate". Tried this, but the content is empty and also the selector.
$('#company-'+currentTabIndex).children('.myTemplate').html()
//currentTabIndex has the current Tab-Index, in this case: 1

Firstly, the id property in your HTML has no - in it. Secondly, children looks at direct descendants, whereas you need to use find():
$('#company' + currentTabIndex).find('.myTemplate').html()
That said, you can use a single selector and remove the find() completely:
$('#company' + currentTabIndex + ' .myTemplate').html()

You want .find, not .children:
$('#company-'+currentTabIndex).find('.myTemplate').html()
.find looks for descendant elements. .children just looks for immediate children.
Or a single selector using the descendant combinator (the space before .myTemplate below — gotta love that name):
$('#company-' + currentTabIndex + ' .myTemplate').html()
See also Rory's note about the - in your selector, which isn't in your id. Either remove it from the selector, or add it to the id.

Children searches only for single level child elements, you have to use find().
$('#company-'+currentTabIndex).find('.myTemplate').html()
Given a jQuery object that represents a set of DOM elements, the
.children() method allows us to search through the children of these
elements in the DOM tree and construct a new jQuery object from the
matching elements. The .children() method differs from .find() in that
.children() only travels a single level down the DOM tree while
.find() can traverse down multiple levels to select descendant
elements (grandchildren, etc.) as well.
Reference: .find() - .children().

Instead of
$('#company-'+currentTabIndex).children('.myTemplate').html();
Try
$('#company'+currentTabIndex).find('.myTemplate').html(); //remove '-' from the selector
Use .find() instead of .children() as shown above.

Related

How to get all Child Elements with specific attribute in JavaScript

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

Is there a method in jQuery that will traverse up the dom tree from an element and check selectors before its parent element

For example:
<div class="mainWrapper">
<div class="FirstLayer">
<input class="foo" value="foo" />
</div>
<div class="SecondLayer">
<div class="thirdLayer">
<input class="fee" />
</div>
</div>
</div>
Lets say I have the input.fee as a jQuery object and I also need to get the value of input.foo.
Now I know I can use a multitude of approaches such as $(this).parents(':eq(2)').find('.foo') but I want to use this one method on layouts which will have varying levels and numbers of nodes.
So I am wondering if there is a method which will simply start from .fee and just keep going up until it finds the first matching element, .prevAll() does not appear to do this. There are many .foo and .fee elements and I need specifically the first one above the .fee in context.
How about this:
$('input.fee').closest(':has("input.foo")')
.find('input.foo').val();
Here's JS Fiddle to play with. )
UPDATE: Kudos to #VisioN - of course, parents:first is well replaced by closest.
This will select the previous input.foo
// self might have siblings that are input.foo so include in selection
$( $("input.fee").parentsUntil(":has(input.foo)").andSelf()
// if input.off is sibling of input.fee then nothing will
// be returned from parentsUntil. This is the only time input.fee
// will be selected by last(). Reverse makes sure self is at index 0
.get().reverse() )
// last => closest element
.last()
//fetch siblings that contain or are input.foo elements
.prevAll(":has(input.foo), input.foo")
// first is closest
.first()
// return jQuery object with all descendants
.find("*")
// include Self in case it is an input.foo element
.andSelf()
.filter("input.foo")
// return value of first matching element
.val()
jQuery.closest() takes selector and does exactly what you need - finds the first matching element that is parent of something. There's also jQuery.parents() that does take a selector to filter element ancestors. Use those combined with find method and you're set.
$('input.fee').closest('.mainWrapper").find('.foo') does the trick, doesn't it?

How to get the container id in javascript or in jquery

I have some HTML blocks look like
<li id="item261">
<div class="itemdesc">
<a class="icon-hide">Hide</a>
</div>
</li>
And i have a jquery like
$(document).ready(function()
{
$('.icon-hide').click(function(){
var elemId = $(this).parent().attr("id");
});
});
I need the ID of the "li" tag on click of ".icon-hide". how can i achive this? any help..
I'd suggest:
$('.icon-hide').click(function(){
var elemId = $(this).closest('li').attr('id');
});
This is because parent() as implied in the name of the method looks at the parent of the element returned by the selector (the parent is the div); whereas closest() continues up the ancestor tree to match the first selector passed to the method.
You could, instead, use parents(), however the important difference between closest() and parents() is that closest() returns zero or one match, whereas parents() will continue all the way to the root element and return every match it finds, so it can return zero, one or many matches.
Another difference is that parents() starts searching from the current element's parent, whereas closest() starts with the current element itself, so it's quite easily possible, using closest() for the method to return the current/$(this) element itself.
References:
closest().
parent().
parents().
$(this).closest('li[id]').attr('id')

jQuery multi level selector does not work but .children does

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.

jQuery "find" method alternative

$('.wrapper a').find('a'); //return empty object
But i am looking for a way get all anchors by selector. Problem is find method look at only descendants so what is alternative of it ?
Please test it on jsfiddle.net
jQuery find gets the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
children gets the children of each element in the set of matched elements, optionally filtered by a selector.
I think you are trying to find the elements at the same level then you should use children. Alternatively you can also use filter to filter the matched results based on selector.
filter reduces the set of matched elements to those that match the selector or pass the function's test.
Try this
var div = $('.wrapper div').filter('.parent');
Looking for this?
var div = $('.wrapper div').filter('.parent');
A forked demo of yours
the alternatives of .find() function which are as below:
Child Selector (“parent > child”) it selects only first-level descendants or direct child elements. for example $('#parent_id > #child_id') or $(".parent > .first-level-child")
Descendant Selector (“ancestor descendant”) it selects a child, grandchild, great-grandchild, and so on, of that element. in it you can use $('#parent_id #child_id') or $('#parent_id #grandchild_id') or $(".parent .great-grand-child") or $( "form input" )
.filter() only search in those elements that match the precondition.
.parent() get the parent of each element in the current set of matched elements, optionally filtered by a selector.
.children() it works exactly the same way as find, but it will only find first-level-children, not more distant descendants.
.closest() get the closest (first) element that matches the selector, starting at the current element.
for detailed info about jquery selectors check JQuery Selectors
$('.wrapper a').find('a'); find links inside links that are descendants of .wapprer.
I think you might have meant $('.wrapper').find('a');. In your fiddle that would be
$('.wrapper').find('.parent');`
insetead of:
$('.wrapper div').find('.parent');

Categories