$('.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');
Related
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.
Quick, simple question.
I have this function working at the moment ;
$("#menuopties").click(function(){
$("p").toggle();
});
However this toggles every p tag.
I just want to toggle the p tags which are under the div #menuopties (which has been clicked)
Thanks.
Your current selector "p" will get all the elements of type p instead of getting the p within the current object. Use find() to get the descendant of current element. you will get the source of event object using $(this)
$("#menuopties").click(function(){
$(this).find("p").toggle();
});
You can use pass current object in context of the selector using jQuery( selector [, context ] )
$("#menuopties").click(function(){
$("p", this).toggle();
});
Try like this
$("#menuopties").click(function(){
$(this).find("p").toggle();
});
How about:
$("p", this).toggle();
try:
$("#menuopties").click(function(){
$(this).find("p").toggle();
});
hope that helped.
Change $('p').toggle(); to $(this).children('p').toggle();
$(this) refers to the current jQuery object (in this case wrapping the #menuopties DOM element), so running .children() allows you to filter its descendant elements by whatever selector you want (in this case p).
edit: as buzzsawddog pointed out, it's important to note .children() only returns the child elements a single level below in the DOM, so if your p tags are not immediate children of #menuopties you should use .find() instead.
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')
I have a Selector in a Selector. I want the inner Selector to select only those elements, that are also selected by the outer Selector.
This is what my naiveté came up with:
$('.some-class').hover(function() {
$( this + '.another-class');
})
Put differently, I want the elements with with another-class AND which are children of the element that is hovering. How do I do that?
Use the children() method.
$('.some-class').hover(function() {
$(this).children('.another-class');
});
This method falls under the traversal category, which allows you to select ancestors, descendants, siblings etc all from the current element.
$('.some-class').hover(function() {
$(this).find('.another-class');
})
This Keyword represent Object
You need to try this
jQuery(".another-class", this);
More detail
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.