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

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

Related

jQuery selector that finds links whose text doesn't begin with something

I need to add an additional limiter to this find() method so that the <a> elements whose text begin with a string of Re: are left out.
$(document).find(".middletext:not(.quoteheader) > a[href^='http://fakeURL.com/']")
The problem is that I don't know of an attribute to represent the text within an <a> tag, and I don't know of a selector that only selects strings that don't begin with something. If a text attribute existed and if a selector that selects strings that don't begin with something looked like this: ^!=, then my code would be:
$(document).find(".middletext:not(.quoteheader) > a[href^='http://fakeURL.com/'][text^!='Re: ']")
How can I make this work?
I suspect there is a way to use filter() after using find() and make it work, but I don't know how.
I'd suggest, as you say, using filter():
$(document).find(".middletext:not(.quoteheader) > a[href^='http://fakeURL.com/']")
.filter(function(){
return $(this).text().indexOf('Re:') !== 0;
}).css('color','red'); // or whatever
References:
JavaScript:
String.prototype.indexOf().
jQuery:
filter().
find().
text().

What is the difference between the selectors #id and [id$='id']?

What is the difference between two statements:
$("span[id$='id']").text(var);
// And
$("#id").text(var);
HTML code is : <span class="normal11" id="id"></span>
The first one is using ends with selector while the second one is using just normal id selector.
Attribute Ends With Selector [name$="value"]
ID Selector ("#id")
By the documentation on JQuery:
$("#id") uses the JavaScript function document.getElementById(), which is extremely efficient. Link.
So, the second way should be faster and should be used.
Some different between id selector and attribute selector is
Since id selector called document.getElementById(),
it only return the first element that have a id equal to that.
However, if you use attribute selector, it will return all elements that have the id attribute that equals to that.
But duplicated id is actually invalid in HTML, and should never used.
if you really want to do that, use class instead.
example
$("#id-selector").click(function(){
$("#test").css("color", "red");
});
$("#attr-selector").click(function(){
$("*[id=test]").css("color", "blue");
});
http://jsfiddle.net/toucyqas/1/

different result with jquery and javascript

I have a select with id: param0.typeParameter.
I try to get it with jquery with:
$('#param0.typeParameter');
i get nothing but if it use this
document.getElementById('param0.typeParameter');
that work
To make jQuery select element with ID param0.typeParameter instead of element with ID param0 and class name typeParameter you should use the following:
$('#param0\\.typeParameter');
Official Proof
To use any of the meta-characters ( such as
!"#$%&'()*+,./:;<=>?#[\]^``{|}~ ) as a literal part of a name, it must
be escaped with with two backslashes: \\. For example, an element with
id="foo.bar", can use the selector $("#foo\\.bar").
SOURCE: http://api.jquery.com/category/selectors/
DEMO: http://jsfiddle.net/LtRxg/
You can try this instead:
$('[id="param0.typeParameter"]');
Or else the code assumes you want to select an element with id param0 and class typeParameter
jQuery uses the CSS-selector language. Which causes "#param0.typeParameter" to be interpretted as an element with id param0 and class typeParameter.
The jQuery statement is more similar to:
document.querySelector("#param0.typeParameter");

How to find elements without a class in Jquery?

I have the following html
<div class="one">One<div>
<div class="two">two<div>
<div >three<div>
<div >four<div>
<div class="three">five<div>
How would I find the div elements which don't have a class attribute? ie three and four?
You can use :not selector
$('div:not([class])');
here is API
And a simple Fiddle
Use :not selector to filter
$('div:not([class])');
Combine the :not() selector with the attribute present selector [class].
$("div:not([class])")
jsFiddle.
Another option is to use .not() with Has Attribute Selector
$('div').not('[class]')
There are different ways to do it. You could use .children() to get the list and then index into that. Or you could look up the second element and use .next() to get its sibling.
Assuming you're not wanting to select all the dividers which have no classes, you can use nth-child to select specific ones if you know exactly where they are within a container. This will select your class-less dividers:
$('div:nth-child(3)') // Selects the third divider
$('div:nth-child(4)') // Selects the fourth divider
$('div:nth-child(3), div:nth-child(4)') // Selects both
JSFiddle example.
Alternatively you can select using .prev() and .next():
$('div.two').next() // Selects the divider after div class="two"
$('div.three').prev() // Selects the divider before div class="three"

jQuery first of type selector?

How would I select the first <p> element in the following <div> with jQuery?
<div>
<h1>heading</h1>
<p>How do I select this element with jQuery?</p>
<p>Another paragraph</p>
</div>
Assuming you have a reference to the div already:
$(yourDiv).find("p").eq(0);
If the first p will always be a direct child of the div, you could use children instead of find.
Some alternatives include:
$(yourDiv).find("p:eq(0)"); //Slower than the `.eq` method
$(yourDiv).find("p:first");
$(yourDiv).find("p").first() //Just an alias for `.eq(0)`
Note that the eq method will always be the fastest way to do this. Here's the results of a quick comparison of the eq method, :eq selector and :first selector (I didn't bother with the first method since it's just an alias of eq(0)):
$('div p:first')
answer was too short to post without this useless sentence.
Edit
This is definitely a slow option. After looking at Jame's speed test, it looks like jQuery selectors work best when they piggy back off of css selectors.
$("div p").first();
or $('div p:first');
Reference: http://api.jquery.com/first/
Keep in mind that first() matches only a single element, the :first-child selector can match more than one: one for each parent.
You almost know the answer (from your post title). There is a selector in jQuery called :first-of-type. Use it to find and add class to the first p tag automatically, like so:
$("div p:first-of-type").addClass('someClass');
$('div p').first()
Should work. I think.
This should work
$( "div p:first-of-type" ).css( "font-size: 10px" );
The above code finds the first paragraph in the div as #Denver pointed and changed its fonts-size to 10px
Here is an example that explains even more about jQuery first-of-type selector

Categories

Resources