jQuery CSS 'or' selector - javascript

I am trying to select elements of a (certain class || another class) with the same selector. How can I go about doing that?
Currently, I have:
$(".class1 .class2").each(function(idx, el) {... });
however, that only selects elements that match both classes, not one or the other.
How can I select elements that match one or both of the classes, with the same selector?

Try this
$(".class1,.class2")
http://api.jquery.com/multiple-selector/

$(".class1,.class2").each(function(idx, el) {... });
put a comma within the same selector string.
http://api.jquery.com/multiple-selector/

Related

Combine inverse property and inverse class selector with existing selector

I have this jQuery code:
$("#Filter ul input:checked").each(function () {
if (!$(this).prop("disabled") && !$(this).hasClass("ignoreInput")) {
Can this be written in only one selector? Right now I'm taking in too many elements to test with the if statement.
Is it also better to use .find(selector) instead of writing all in one selector?
$(document.body).find("#Filter ul ...)
You could use a combination of :not() along with the attribute selector, like this:
$("#Filter ul input:checked:not([disabled],.ignoreInput)").each(function () {
// your logic here
});
Is it also better to use .find(selector) instead of writing all in one selector?
This makes little to no performance difference.

Selector to get prev of parent

Is it possible to achieve the following only using selector
$(this:parent:prev)
I wish to get prev of parent. I want to only use selector
There is no parent selector and previous sibling selector, so you've to use parent and prev methods
$(this).parent().prev();
And if you look at the jQuery Documentation for :parent, you don't really want :parent.
Select all elements that have at least one child node (either an element or text).
You can create a custom :parent selector in jQuery as follow:
$.extend($.expr[':'], {
parent: function(element, _, m) {
return $(element).parent();
}
});
$('span:parent').css('color', 'green').prepend('Hello World!');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span>Bye!</span>
</div>
In pure JavaScript this would be:
this.parentNode.prevElementSibling
Try
$(this).parent('div').prev();

jQuery opposite of "starts with" selector: [^=]

I have some div tag below:
<div class="magazine"></div>
<div class="newsletter"></div> // I need to take this div
<div class="may-moon"></div>
If I needed div with class start with "ma", I would use $('div[class^="ma"]'), but what is opposite? thanks.
The opposite would be to use jQuery :not():
$('div:not([class^="ma"])')
You can use the negative filtering function "not" like this: $('div').not('[class^="ma"]'), or the negative selector ":not" like this: $('div:not([class^="ma"])') (as pointed by Karl-André Gagnon)
You need to use :not() Selector for this. because there is no exact opposite selector exist of [^=] and * in jquery.
:not() Selector - Selects all elements that do not match the given selector.
See more about Jquery selectors
There a opposite selector exist ! -
Attribute Not Equal Selector [name!="value"] - Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.
but use of this ! selector, you need to provide full-name of class.
$('div[class!="magazine"][class!="may-moon"]')
Try This

change jquery selector to not select particular div id

I have a jquery selector that I would like to change so that it wont select <div id="divA"></div>.
Heres the current selector:
$('ul.toggle a').on('click', function () {
//does some work
});
I tried $('ul.toggle a [id!=divA]') but that thows errors.
What is the intended format for this selector?
You can use :not to remove elements from the set of matched elements.
$("ul.toggle a:not('#mhs-link')")
How about this-
$('ul.toggle a').not('#divA')
The .not() function simply removes elements from a previous list of elements. Because of some nifty function chaining, you can just insert that into your current definition -
$('ul.toggle a').not("#divA").on('click', function () {
//does some work
});
References
not() - Remove elements from the set of matched elements.

How to add a class when a link has a certain label

I have a series of links with no a classes. I am unable to manually add any classes in the HTML...otherwise I would. I want to use either JavaScript or jQuery to detect a certain link label and add a class to it if the match is found.
Here is the HTML:
<ul class="menu-main-nav">
<li>Duck</li>
<li>Duck</li>
<li>Goose</li>
</ul>
I want to add a class whenever "Goose" appears. Here is what I attempted... and failed.
$(document).ready(function(){
if ($("#menu-main-nav li a").text() == "Goose") { this.addClass("itsagoose")};
});
Use the .filter method:
$("#menu-main-nav li a").filter(function(){
return $(this).text() == "Goose"; //<--- Only include these elements
}).addClass("itsagoose");
Use .html() instead of .text() if you want an exact match, and don't want to allow anything else (eg, don't match <a><span>Goose</span></a>).
Fiddle: http://jsfiddle.net/RWSCY/
Look at the jQuery contains selector. That's what it's for :)
Well, you could use filter:
Demo
$("a").filter(function(){
return $(this).text() == "Goose"
});

Categories

Resources