How to select element with single class name in Jquery? - javascript

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

Related

Dynamically select element based on value within href file path with Cheerio [duplicate]

Is there a selector in jQuery that will allow me to select all anchor tags that have a href beginning with href="/products/index?page="?
My full href is href="/products/index?page=2", but they all have the beginning in common.
You can use the starts-with attribute selector, like this:
$("a[href^='/products/index?page=']")
In case you're curious, there are other attribute selectors available as well.
Attribute starts with selector
$("a[href^='/products/index?page=']")
You want to use the jquery starts with psuedo selector:
$('[href^=/products/index?page=]')

Select next element of a given type after specified element

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('Ch‌​ange the text')

jQuery selector custom attribute

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.

JQuery: Custom Attribute Keyword Selector

For a project I'm using a custom attribute on elements to designate whether or not they'll have a custom template. I need the ability to select elements with a custom template based on a keyword. I've made a simplified case for demonstration.
So, for example:
<div jk_template="blue">Blue</div>
<div jk_template="red">Red</div>
<div jk_template="red big">Red Big</div>
I've tried:
$('[jk_template="blue"]').css('color', 'blue');
$('[jk_template="red"]').css('color', 'red');
$('[jk_template="red big"]').css('font-size','22px');
Unfortunately the red big only appears with larger font-size, but not colored red.
Fiddle
I also want to be able to select elements that don't have the custom template based on the absence of the attribute. Is all of this possible using just JQuery selectors?
Yes and JQuery actually leverages CSS 1-3 selectors.
To select an element with a specific attribute value substring use [attr*=value]:
$('[jk_template*="red"]').css('color', 'red');
To select an element without a specific attribute use the :not selector:
$(':not([jk_template])').css('color','orange');
Updated Fiddle

div addClass only on ONE div

When i do something like :
$('#container').addClass("contract");
It only add class to the first div with id container
When i do something like :
$('.container').addClass("contract");
It adds the class to ALL the divs with class container
WHY ?
Every element ID must be unique. An ID points to one and only one attribute. Jquery or any other framework would not even consider that you might have more than one element with a particular id. All your elements need to have a different id. Javascript and the DOM expect this (document.getElementByID for example will return just one element, and might now work at all if the ID is duplicated). Everything expects this.
Because id attribute has to be unique in HTML document. So there is no need to search for any others eelements with id="abc" when you find a first one.
An element's ID attribute should uniquely identify it. A class attribute may be applied to more than one element. As ID is unique, jQuery will only apply it to the first element that matches that.

Categories

Resources