What is the jQuery alternative to not(':not( selector )')? - javascript

What is the jQuery alternative to not(':not( selector )')?
Basically lets say this:
var buttons = $('a.buttons');
I am looking for a particular button with the href as '#measurement' and need to add a class to it. The only way I know how to do this is with not(':not( selector )').
buttons.not(':not([href="#measurement"])').addClass('selected');
There has got to be a better way.
.is() // returns boolean
.has() // looks for items inside each element
Any thing out there?

I believe you want filter:
$elements.filter(selector)
so if you already have
var $buttons = $('a.buttons');
you can get the right one by
var $theButtonIWant = $buttons.filter('[href*="#measurement"]');

The 2 nots cancel out, and you get
$('a.buttons[href="#measurement"]').addClass('selected');
Docs: http://api.jquery.com/category/selectors/attribute-selectors/
EDIT: If you already have a collection, use .filter
var buttons = $('a.buttons');
buttons.filter('[href="#measurement"]').addClass('selected');

var button = $('a.buttons[href*="#measurement"]').addClass('selected');
The [ ] block lets you specify an attribute. The *= operator in it specifies that the attribute contains the quoted text.

Related

How can I select with jQuery and use javascript method to apply a change?

I'd like to use a variation of this code, but I'm having a bit of trouble concatenating the following snippet. Essentially using a for loop from a returned value.length and append the buttons, then replace data for buttons:
for(var i...){
var button = "'<button>%data%</button>'";
$(".buttons").append(button).replace("%data%", var);
};
You don't need to make the replace after you append the element. You should just set var directly on element either with text or html, depending on what var holds. Also, please notice that jQuery doesn't have a method called replace, it only has replaceWith (http://api.jquery.com/replaceWith/) and replaceAll (http://api.jquery.com/replaceAll/).
for(var i...){
var button = $("<button></button>").text(var);
$(".buttons").append(button);
};

jQuery: easier way to use .clone() than described below?

If you execute in the console on this page
var cloned = $(".question").clone(true);
$(".question").addClass("first");
var clonedStr = cloned[0].outerHTML || new XMLSerializer().serializeToString(cloned[0]);
$(".question").after(clonedStr);
you will clone the question (there will be two questions on the page, but the first one will be with the .first class). That's what is needed.
Is there any simpler way to do this with jQuery? I'm confused of the third string in the code above and believe it could be simpler. Any ideas?
Thank you.
If you don't use the HTML as string, then don't get it. Just use the jQuery object:
var cloned = $(".question").clone(true);
$(".question").addClass("first").after(cloned);
Also, you can do it one line:
$(".question").after($(".question").clone(true)).first().addClass("first");
You could use insertAfter to insert the cloned element after changing the class. You don't need to convert the element in the jQuery object to a string, you can use that object within the function itself:
var $question = $('.question');
var $cloned = $question.clone(true).insertAfter($question);
$question.addClass('first');

Mootools Selector issue

Right now I have a dynamic string that assigns it's values to a particular div class.
Output looks like this
<div class="12923"></div>
I want to find that 'randNumber' div, then check if it has another class 'x'
Currently what I have now doesn't work:
var randNumber = 12923
var lookingForYou = $$('.'+randNumber);
if (lookingForYou.hasClass('XCLASS')){alert('XCLASS FOUND!');}
$$ returns an Elements instance, Elements is an array-like Class
anyway since you are basically filtering, you can tell Slick that you need an element with both class:
var randNumber = 12923;
if($$('.' + randNumber +'.XCLASS').length>0){
alert('XCLASS FOUND');
}else{
//dostuff
}
or you could just use one of the Elements methods, I think .some will be your best choice here:
var randNumber = 12923
var lookingForYou = $$('.' + randNumber);
alert(lookingForYou.some(function(el){
return el.hasClass('XCLASS');
}))
EDIT:
adding some links:
A better way to use Elements on MooTools blog
in my second example I used the some method, which, by looking at the source is not overloaded, but is just the one in Array.prototype.some:
Element.js source reference
Array.some on MDN
$$ returns an array of all matching elems. Not sure if you can do a hasclass on an array. Might have to do a .each() then do it. Try $('body').getElement('.'+randNumber).hasClass('XCLASS') this way you grab 1 elem if you don't want to mess with the array.
Here:
if (lookingForYou.hasClass('XCLASS')){alert('XCLASS FOUND!');}
$$() returns an array, and hasClass() performs the check on each element of the array, returning an array of booleans. Unfortunately, when you check if (...), then the return array, even if all of the values are false, is evaluated as true because it's non-empty.

How do I access the original element from the jQuery wrapper

Assuming I have this:
var wrap = $("#someId");
I need to access the original object that I would get by
var orig = document.getElementById("someId");
But I don't want to do a document.getElementById.
Is there something I can use on wrap to get it? something like:
var orig = wrap.original();
I searched high and low but I didn't find anything; or maybe I'm not looking for the right thing.
The function for this is get. You can pass an index to get to access the element at that index, so wrap.get(0) gets the first element (note that the index is 0-based, like an array). You can also use a negative index, so wrap.get(-2) gets the last-but-one element in the selection.
wrap.get(0); // get the first element
wrap.get(1); // get the second element
wrap.get(6); // get the seventh element
wrap.get(-1); // get the last element
wrap.get(-4); // get the element four from the end
You can also use array-like syntax to access elements, e.g. wrap[0]. However, you can only use positive indexes for this.
wrap[0]; // get the first element
wrap[1]; // get the second element
wrap[6]; // get the seventh element
$("#someId") will return a jQuery object, so to get at the actual HTML element you can do:
wrap[0] or wrap.get(0).
You can use get() to retrieve the HTML element.
var orig = wrap.get(0);
However, if wrap consists of multiple elements, you will need to know the correct index which to use when you use the get() function.
You can just use var orig = wrap[0]; as far as I know, if there's more than one element. If there's just the one, you can just use wrap without $() around it.
You can use wrap still.. Wrap is the same as 'orig' would be in the above! :)
If you really want:
var orig = wrap;

How to get whats inside a variable ID or Class

Say I have this:
var name = $('#contactName');
Is there a way to get just the contactName out of that variable?
Edit: The variable is already set and the value of it is $('#contactName').
What I want to do is retrieve the text from that variable, not create multiple variables. I could easily duplicate variables and just do var nameID = 'contactName' but I am hoping theres an alternative.
You can use the selector property:
var name = $('#contactName');
alert(name.selector); // alerts #contactName
However, you'd have to strip the #, so something like:
s.selector.replace('#','')
Obviously, this would only work for ID-based or tag-based selectors. Class-based selectors would need the . removing.
Try
var name = $('#contactName').attr('id');
All jQuery objects have a selector property that will return the selector they were created with, so your name object would return #contactName. You could then strip off the hash sign.
The title and body of your question seem at odds.
To answer the title:
If the jQuery object was created with a selector, then name.selector should do the trick.
To answer the body:
name.attr('id')
Don't you just use
var name= $("#contactName").val()
??

Categories

Resources