jQuery label 'for' attribute selector - javascript

I am using Remy Sharp's labelover plugin for jQuery and I would like to exclude a label with the attribute for and value nature.
Here's an example of the code working:
$(document).ready(function() {
$('form.default label').labelOver('over');
});
and what I'm trying to do:
$(document).ready(function() {
$('form.default label').not($('label').attr('for','nature')).labelOver('over');
});
Can anyone see where I'm going wrong? Feels like I'm pretty close to what I need to do.

attr is not a selector, it's a function that gets the attribute value with attribute name as the 1st argument, or sets it with a new value if one is passed as a 2ng argument.
Also, you excluded labels after selecting them with your not call, because the selector label matched all labels, and attr as I said did not filter that.
To select based on attribute, use this:
$(document).ready(function() {
$("form.default label[for!='nature']").labelOver('over');
});
As you may have guessed, the [attribute='value'] is the selector for an attribute "equal" to some value, and [attribute!='value'] is the "not equal" version of it.
For reference see:
http://api.jquery.com/attribute-not-equal-selector/
For reference on all selectors:
http://api.jquery.com/category/selectors/
This is also referenced at my JavaScript & Web Dev Newsletter site.

.attr('for', 'nature') is setting the value for the for attribute to nature
To filter by attributes, use [attribute="value"]:
$('form.default label').not('[for="nature"]').labelOver('over')

working code: http://jsfiddle.net/3nQbr/1/
$('label').not('[for="nature"]').labelOver('over');

Related

Selecting element with specific class and value

How to select element with class MyClass and value MyValue, but without using each?
I tried something like:
$(".MyClass").find("[value='MyValue']")
$(".MyClass[value='MyValue']")
This is example: http://jsfiddle.net/HQaG5/
It works if i use hard coded value for select element.
You want :contains() :
$( ".MyClass:contains('MyValue')" )
Take a look here: jquery find element by text
You can use the :contains selector to find elements containing text.
But if you want to match an exact string then .filter is the better option
If the element is an input and you want to search after property value you can use .filter()
$('.MyClass').filter(function(){
return this.value=="MyValue";
});
DEMO
If you are looking to get the select box element that has the specified value selected (which seems to be the case based on your fiddle), then you can use this…
$(".MyClass option:selected[value='MyValue']").parent()
DEMO
However, I would question why you want to do this, as it seems kind of backwards.

Using HTML5 Data Attribute in jQuery Selector

Noob Question on Data Attribute
I was wondering will using data-attribute in jQuery Selector can bring any trouble in the future?
I'm trying to reduced the usage of .class and #id as jQuery Selector, since most of data I'm working on will generated from data-attribute
example of the code
$(document).ready(function(){
var mydata = $(document).data('my-data-attribute');
});
will the code above slowing the load time?
or
$('[data-suffix-attribute="some_value"]').each(function(){
......
});
or
$('[data-suffix-attribute="delete"]').click(function(){
// delete action happening here
});
will this bring trouble?
$(document).ready(function(){
var mydata = $(document).data('my-data-attribute');
});
The code above will not work. If you want to read the HTML5 data attribute of an element using the jQuery .data() method firstly you need to select the relevant element using a jQuery selector and then you can use the method as is shown below:
var mydata = $('.example').data('suffix');
This will read the value of the data-suffix attribute of an element with a class of "example".
The other important thing to note when using the .data() method is that you have to omit the data- prefix from the selector to read the value stored in that attribute.
The way you have selected the attribute before the .each() method will work:
$('[data-suffix-attribute="some_value"]');
However, it would be better if you can narrow it down to a specific element like:
$('div[data-suffix-attribute="some_value"]');
This is because the first selector will go through every node in the document which will take more time whereas the second will only go through the div tags in the document.
The attribute selector is supported by the native query selectors so it is fine. As far as future is concerned I don't think in near future it will be a problem.
But it will be better if you can use a element selector attached to the attribute selector like $('div[data-suffix-attribute="delete"]')
If you are very worried about performance it will be a better choice to add a class attribute to the desired elements and then use class selector
It would be better to use id in selector which is fast obviously,
If you have multiple data attributes then it is better to use $('[data-suffix-attribute="delete"]').click();.
Instead of this you can use the parent selector for your data-attribute elements like,
$('#parentId').on('click','[data-suffix-attribute="delete"]',function(){
// delete action happening here
});
#parentId contains all data attribute elements

Getting attribute set by a function jQuery

I have a function attached to the div #Browse's click event that toggles a variable isOpen to true or false. Another click event has the following statements
alert($("#Browse").attr('isOpen'));
alert(document.getElementById('Browse').isOpen);
The first one yields "undefined" while the second one says true or false and is correct. How can I get the value of isOpen using jQuery?
Use data attributes to both set and get the data:
// to set
$("#Browse").data('isOpen', true)
// to get
$("#Browse").data('isOpen')
Documentation
jQuery data method - http://api.jquery.com/data/
There is no "jQuery way" to do this, because isOpen is an ad-hoc property. If you are able to change how the property is set, follow the recommendations in Chris' answer.
Otherwise, the closest you can get is to use jQuery to get the DOM element, and then unwrap it:
alert($("#Browse")[0].isOpen);
With new versions of jQuery, you need to use .prop to get this.
alert($("#Browse").prop('isOpen'));
To get access to the dom element in jQuery, you have to get the element by its index in the jQuery collection: With an id, there's hopefully only one element in your collection, so you can use get(0)
$('#Browse').get(0).isOpen;
For more convinient setting of attributes on jQuery elements, just use the data method

Change NAME attribute onClick with Jquery

I am trying to change the NAME attribute of a DIV for the content of a textbox using jQuery.
Here's my fiddle: http://jsfiddle.net/e6kCH/
What am I doing wrong?
The biggest problem is a logic problem.
content = document.getElementById("theid").value
This gets the current value of the input. The problem is, it does not get updated when you change the value of the input. To solve that, move the line into the click event handler.
Once the various other javascript errors are fixed (Click the JSLint button!!!), it will work. http://jsfiddle.net/e6kCH/4/
Instead of:
$(#divId).attr("name")=content;
Use:
$("#divId").attr("name", content);
attr is a function not a property.
Keep the same code, only change the JS for this:
$('#buttonId').click(function() {
$('#divId').attr('name', $('#textId').val());
});
Keep in mind it only changes the name of the div, you'll need something like Google Chrome's developer tools to see it change.
The way to use .attr() to set the value of the attribute is:
.attr( attributeName, value )
Description: Set one or more attributes for the set of matched elements.
attributeName: the name of the attribute to set.
value: a value to set for the attribute.
$('#divId').attr("name", content);
Note: don't forget to surround your selectors with quotes (or double quotes) within the jQuery function $()
http://jsfiddle.net/e6kCH/10/ That should get you what you want.

Chaining selectors in jQuery

I'm a guy used to mootools' way of chaining selectors, and I can't seem to find anywhere how to do the same in jQuery.
Suppose I have a select element in the selectObj variable. What I need is to get the last option in that select.
In mootools I would have done something like:
var option = $(selectObj).getElement('nth-child(last)')
Can I do something similar, or what is the way of getting that last option in jQuery?
PS. I know about the parent > child selector, but I can't really use it because I don't know what selector has been used to get the select. I only have the resulting element.
$(selectObj).find(':last')
You can use find to perform another query within the current query.
In general, you can check out the Selectors and Traversal pages on jQuery docs when you're trying to figure out how to select something.
var option = $(selectObj).children(":last");
will return the last child of any element
You can also use .last() for this purpose.
jQuery has the :last Selector
$("tr:last").stuff()
Will do stuff to the last row in a table.

Categories