jQuery hasClass doesn't work for me? - javascript

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'));

Related

How to select element with single class name in Jquery?

I have below html and want to get the element based on 'natural' class. The reason is I get t dynamic classes after 'natural'
<coral-checkbox class="natural coral-Form-field coral3-Checkbox" ></coral-checkbox>
I am trying below code to get hide the element but it is not working.
$("coral-checkbox[class='.natural']").hide();
But it is working when I select entire class like below but I need to do with only 'natural'. Is this possible ?
$("coral-checkbox[class='.natural coral-Form-field coral3-Checkbox']").hide();
Use .classname to select based on any of the element's classed. When you use an attribute selector, it matches the entire attribute (unless you use modifiers like *=, but they're not appropriate here, either).
$("coral-checkbox.natural").hide();
Use the class the selector instead of the attribute selector:
$("coral-checkbox.natural").hide();

Remove div between div using Jquery

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

Selecting range of elements with jQuery and CSS

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')

Apply style on text which is having bold

Like attribute selectors in CSS, is it possible to apply style on text which is in bold inside a DIV. For example I can select a DIV using CSS attribute selector like below
div[attr = value]{
...
}
Is there any way to select Bold text like above selector? If JavaScript there are several ways to make that work but I am just looking for possibility of CSS solution. And my target is only Chrome
No. CSS doesn't provide any selectors that operate based on the style of an element.
this should be quite easy.
div b{font-weight:normal;}
this will select every <b> tag contained within every <div> tag, and set the font weight to normal.
If you wanted to be specific, use the div class or id.
#someDivId b{font-weight:normal;}
If your bold text is not defined with <b> tags, but you know what tags are used, such as span, then you might try,
span[style*="font-weight"]{font-weight:normal !important;}
http://jsfiddle.net/G8NaB/
Hope this helps...
According to http://www.w3.org/TR/css3-selectors/#attribute-selectors
[att*=val] Represents an element with the att attribute whose value
contains at least one instance of the substring "val". If "val" is the
empty string then the selector does not represent anything.
So you may try:
div[style*=bold]{
...
}
This will work if you apply inline styles.
You can try this fiddle.
HTML
<div data-role="page">Bold text</div>
CSS
div[data-role~="page"]{font-weight:bold;}
Hope this helps.

jQuery Remove CSS Class from all Descendants at once

Can I remove a specific CSS class from all XYZ elements within an element at once?
Example: Remove CSS class active from all <a> anchors within my search div.
If so, how?
$("#mydiv a").removeClass("active");
If search is a class:
$("div.search a").removeClass("active");
If search is an ID:
$("#search a").removeClass("active");
Yeah. You do it like this:
$("div a .className").removeClass("className")
Or, supposing you only want to do it on a certain div, as long as the div has an id attribute set, you could do this:
$("#divIDValue a .className").removeClass("className")
With jQuery selectors, # with some text after it refers to the object (div, span, anchor, whatever) with the id attribute set to whatever that text is. A period refers to all objects with that the class name matching the text coming after the period. As demonstrated above, you can nest the selector text. So in the examples above, here's what happens:
Example #1
Find all divs
Finds all anchors within all divs
Finds all of the anchors from #2 that have class .className
Example #2
Find the div with the id attribute set to "divIDValue"
Find all anchor tags within that div
Find all anchor tags within that list of anchor tags that match the class name className
Keep in mind that for all of the objects in your page, only one object can have any particular id value. So, you can have two objects with the id set to 'divIDValue' - although your page will still probably look OK, jQuery will only find the first item with id. Classes, on the other hand, can be used for multiple items (as you probably already know).
A more generic solution to remove the class from any possible element.
// I like to use find as I usually have my wrapper in a variable.
$('#my-wrapper').find('.active').removeClass('active');
Or
$('#my-wrapper .active').removeClass('active');
This will affect all elements within the wrapper: span, h3, div, li, td, etc. With html 5 there are now over 100 possible tags.

Categories

Resources