I am trying to select a range of anchor elements using nth-child pseudo selector. The problem is that nth-child will work only with child elements, but I have a structure like this:
<div>
<a>first link>
</div>
<div>
<a>Second link</a>
</div>
<div>
<a>Third link</a>
</div>
In this case, the following selector that I found useful for selecting first 2 matched elements doesn't work:
$("a:nth-child(n+1):nth-child(-n+2)")
I created an example here: http://jsfiddle.net/o6w5orom/ , in the first example all the elements are returned instead of first 2. In the second one works but only with direct children.
So, is there a way to construct CSS selector for jQuery that will basically return a range of elements, something like nth-child, but will work on matched elements of a jQuery object ? I want to construct the selector, don't wan't to write logic to process a jQuery object.
Use: $("div:nth-child(n+1):nth-child(-n+2) a")
Select the divs with the nth-child then descend to the a's
Yes, you are right - :nth-child returns only direct children.
But what's the problem? Use find.
$("div:nth-child(n+1):nth-child(-n+2)").find('a')
Related
I am trying to select an element based on whether another element has a given ID containing certain text. The problem is that there are multiple elements with this same class name on the page and I only want to select the ones that have the element with this ID directly above them. Is this possible? I tried:
if ($(".element[id*='XYZ']").length > 0){
$(".element").nextAll('.elementoselect').text('Change the text');
}
My first instinct was to do it based on them being within the same DIV but the problems is that the DIVs are given classes when the page loads and they are generic, so this is the only other way I could think of.
Use chaining with the selector
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Change the text');
If you use selector chaining , your oissue could be solved
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Change the text')
I need to remove div elements which are loaded dynamically between two static div elements.
HTML
<div id="defaultFirst">
</div>
..
..
..
<div id="defaultLast">
</div>
There are some div elements which are loaded in between those two static div elements. Now I need to remove those before I append some other elements.
I tried using $('#defaultFirst').nextAll('div').remove() but that removed the #defaultLast element too.
I know that I can get the ids of the dynamic div and remove. But I need to know if there is any simpler way to remove those dynamic div elements?
Use nextUntil() instead of nextAll() and pass in a selector which selects your #defaultLast element:
$('#defaultFirst').nextUntil('#defaultLast').remove();
.nextUntil( [selector ] [, filter ] )
Description: Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
— jQuery's documentation on nextUntil()
If you have elements which aren't div elements between those two which you aren't wanting to remove, you can specifically remove only div elements by passing in a selector to your remove() call:
$('#defaultFirst').nextUntil('#defaultLast').remove('div');
I would recommend getting to the cause of why the divs are appearing in the first place rather than hacking like this. However if you have to then the following should work
$('#defaultFirst').nextAll('div').not('#defaultLast').remove();
Codepen example - http://codepen.io/webknit/pen/ZeZXdQ
I see on jquery documentation that I can use .parent() to filter my matched elements based on the parent. But in the process, the final result I get is the set of parent elements, not the original set of elements. So I see that I can use filter to achieve what I want. But I found so few documentation about how to use filter to filter based on the parent.
For example, my html is:
<div id="social">
Facebook<br/>
Twitter<br/>
</div>
<div id="topsites">
Facebook<br/>
Stack Overflow<br/>
</div>
I want to get a set of elements, which consist of <a> tag that has facebook in it's href attribute, but within the social div parents.
I suspect the code will be something like this:
$('a[href*="facebook"]').filter( ... ).click(function() {
});
But I have absolutely no idea what to put on the filter. "parent#social" ?
Another way to put it is to use filter function.
$('a[href*="facebook"]').filter(function(index) {
return ...
}
.click(function() {
});
I also don't know what code to put on the ... . Is it something like this.parent.id == "social" ? If possible, I prefer the first form, but if the solution can only be achieved by using the second form (filter function) then it's okay. Thank you very much.
.parent() doesn't filter, it traverses. It takes a jQuery object, that lists an array (of size [0, n) ), and generates a new jQuery object with each element's parent.
Getting a jQuery object with the list you're looking for is much simpler though...
CSS Selectors, which jQuery is based upon (with various extensions) are heirarchical by nature. That means selecting specific children of some parent(s) is quite trivial. a CSS selector to pick the element you want is:
#social a[href*="facebook"]
and if you use this inside a jQuery constructor, you'll get you object:
$('#social a[href*="facebook"]')
I want to get a set of elements, which consist of <a> tag that has facebook in it's href attribute, but within the social div parents.
No need of filter here,
$('#social a[href*="facebook"]')
will do.
I have elements in my page like
<div class="editableTxt" data-model-attr="name" data-model-id="123">some text</div>
Now how do I write a selector in jQuery based on the 2 custom attribute values.
So i want something like select element with data-model-attr="name" data-model-id="123"
I want to get a unique element. So I use the 2 attributes.
USe like this
$("[data-model-attr='name'][data-model-id='123']")
As you specified element and not div, have you simply tried:
$('[data-model-attr="name"][data-model-id="123"]');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/x23BV/
for a div obviously just add div:
$('div[data-model-attr="name"][data-model-id="123"]');
Use:
$('div[data-model-attr="name"][data-model-id="123"]');
$('div[data-model-attr="name"][data-model-id="123"]')
But don't use it, it's very slow, set id or classes to this div.
In following code, hasClass doesn't work and result is false in alert. why, what do i do?
Online Demo: http://jsfiddle.net/Fe3CK/
HTML:
<span>
<div class="adding"></div>
</span>
JS:
alert($('span').hasClass('adding'));
I think you might be misunderstanding what .hasClass does. It checks whether the element itself has one of these classes assigned. From the documentation:
Determine whether any of the matched elements are assigned the given class.
If you want to check whether the element contains an element with that class, use .has:
Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
alert($('span').has('.adding').length > 0);
You need:
alert($('span div').hasClass('adding'));
since your span does not have any class adding. Only the child div of your span has it.
Updated Fiddle
Note: Only inline elements may be contained within inline elements. span is an inline element so block level elements like div or p cannot appear within a span.
Hence, <div> inside <span> tag is not a valid HTML5 markup so you should use <div> instead of <span> in this case.
You have to select div not span , as div has class of 'adding'
alert($('div').hasClass('adding'));
Demo
If you want to check any children of span has class, then you can try like this;
alert($('span').children().hasClass('adding'));
div inside a span is not a good practice and your span not have any class adding , adding is its child object's class so please use like
alert($('span').children().hasClass('adding'));