I want to use pseudo selectors along with this attribute.
How can I use it.
$('input:valid').length
It will return 1 if its valid else 0 for invalid.
the same if I want to achieve using this how can I do that.
something like this.
$('input').focusout(function(){
var flag=$('this:valid').length;
console.log(flag);
})
But its not working. Please guide me how to do this.
You should use is():
var flag = $(this).is(':valid'); //returns boolean
Try this instead:
var flag=$(this).filter(':valid').length
REF: .filter() | jQuery API Documentation
Related
I'm new to jQuery, apologies if this is a silly question.
When I use it find an element using the id, I know theres always one match and in order to access it I would use the index [0]. Is there a better way of doing this?
For e.g.
var gridHeader = $("#grid_GridHeader")[0];
You can use .get(0) as well but...you shouldn't need to do that with an element found by ID, that should always be unique. I'm hoping this is just an oversight in the example...if this is the case on your actual page, you'll need to fix it so your IDs are unique, and use a class (or another attribute) instead.
.get() (like [0]) gets the DOM element, if you want a jQuery object use .eq(0) or .first() instead :)
$("#grid_GridHeader:first") works as well.
You can use the first method:
$('li').first()
http://api.jquery.com/first/
btw I agree with Nick Craver -- use document.getElementById()...
http://api.jquery.com/eq/
$("#grid_GridHeader").eq(0)
You can use the first selector.
var header = $('.header:first')
With the assumption that there's only one element:
$("#grid_GridHeader")[0]
$("#grid_GridHeader").get(0)
$("#grid_GridHeader").get()
...are all equivalent, returning the single underlying element.
From the jQuery source code, you can see that get(0), under the covers, essentially does the same thing as the [0] approach:
// Return just the object
( num < 0 ? this.slice(num)[ 0 ] : this[ num ] );
You can try like this:
yourArray.shift()
I'm looking for a way to target option value with a select from a variable.
I target my select like this:
var elem_reference = $(this).find('tr').closest('.reference');
Now I want to do something like this:
$(elem_reference+'option[value="'+id_article+'"]').attr('selected','selected');
I know this way doesn't work. I can't combine a object with string selector but I don't see how to proceed. I already try something like this:
$(elem_reference).filter('option[value="'+id_article+'"]').attr('selected','selected');
and many other ways but that doesn't work.
I found a way,
First my selectors was invert, instead of :
var elem_reference = $(this).find('tr').closest('.reference');
I had to use :
var elem_reference = $(this).closest('tr').find('.reference');
And to solve my problem (not very elegant way) I use :
$(this).closest('tr').find('.reference option[value="'+id_article+'"]').prop('selected', true);
I don't really like that but that do the job for now.
As I understand you can do it like that:
$($(this).find('tr').closest('.reference')).find('option[value="'+id_article+'"]').attr('selected',true);
I can check an object ID in a array with
if (obj[0].id != "myID")
I would like to do the same with a wildcard, so that
if (obj[0].id != "myID*")
will exclude #myID1, #myID2, #myID3 etc.
I have to stay inside the if statement for this check, I can't call an external function.
If it is not possible, I can use obj[0].className instead of .id :
if (obj[0].className != "myClass")
but every object has several classes in addition of myClass.
jQuery is allowed although I'm not sure it will help.
If you're using jQuery (you've added the tag), why not use the selectors?
$('*:not[id^="myID"]')
This gets all the elements where the attribute does not start with myID. You can use this in your if statement like so:
if($(obj[0]).is('[id^="myID"]'))
First of all, you can definitely use an id attribute selector like this
if(!$(obj[0]).is("[id^=myID]"))
However, why not assign a class to all those elements instead? That sounds like a much more reasonable approach, allowing
if(!$(obj[0]).hasClass("myClass"))
Using String.prototype.indexOf might be one possible approach:
if (obj[0].id.indexOf('myID') !== 0) {
// ID does not start with 'myID'
}
You can even use regular expressions:
if( !/(myId)/g.test( obj[0].id.indexOf('myID') ) ) {
}
I can suggest you this really good playground to test you regexp:
http://lea.verou.me/regexplained/
And this talk:
http://www.youtube.com/watch?v=EkluES9Rvak
Regular expression can be very powerful. Maybe your case is not that hard to be managed with other tecniques but you would find regular expressions reeeally useful in the future for other problems.
You could check that the first 4 characters are myID with .substring():
if(obj[0].id.substring(0,4) != 'myId'){ }
If you wanted to use jQuery it would be really easy to check the id or class:
if(!$(obj[0]).is('[id^=myId]')){ }
or
if(!$(obj[0]).hasClass('myClass')){ }
I'm not exactly sure how to handle multiple instances like this. I know in normal JS I can simply use [0] and such.
My code is this:
location.href = $('a.test').attr('href');
I need to handle both the first instance of test and the second. Is there a simple
location.href = $('a.test')[0].attr('href');
I'm missing or such?
$('a.test')[0] return a dom element reference which does not have the method attr(), so your script will fail
use .eq(index)
location.href = $('a.test').eq(0).attr('href');
or
location.href = $('a.test:eq(0)').attr('href');
You are trying to call attr on javascript DOM object instead of using jQuery object as indexer returns the DOM object Use eq() to get jQuery object
location.href = $('a.test').eq(0).attr('href');
You can use DOM object with href instead of attr
location.href = $('a.test')[0].href;
location.href = $('a.test').eq(0).attr('href');
or you can try
location.href = $('a.test:eq(0)').attr('href');
reference eq() and :eq() and attr
This demo might help: working demo http://jsfiddle.net/CmQGu/
you can also use nth-child api demo here: http://jsfiddle.net/wYdyJ/
There are many ways you can approach this, like I showed you in demos. also if you keen read this : Difference between .eq() and .get() and :nth-child()?
API:
first : http://api.jquery.com/first/ (All the peeps up have missed this)
eq : http://api.jquery.com/eq/
nth-child : http://api.jquery.com/nth-child-selector/
Code:
alert(location.href = $('a.test').eq(0).attr('href'));
alert(location.href = $('a.test').first().attr('href'));
alert(location.href = $('a.test:nth-child(2)').attr('href'));
Hope it helps :)
var theHTML = '<html><head><title>Hi</title><link rel="apple-icon-touch-precomposed" href="icon.jpg" /></head><body></body></html>';
alert($(theHTML).find('link[rel="apple-icon-touch-precomposed"]').attr('href'));
It alerts "undefined." I want it to return "icon.jpg". What is wrong?
Try this:
alert($(theHTML).filter('link[rel="apple-icon-touch-precomposed"]').attr('href'));
That is, use .filter() instead of .find().
Demo: http://jsfiddle.net/WmwRU/
If you do a console.log($(theHTML)) you'll see why.
You'll need to use .filter() not .find() when selecting on HTML like that.
JSFiddle
I don't know what you want that for, but if you use filter() instead of find() it'll work as you want:
var theHTML = '<html><head><title>Hi</title><link rel="apple-icon-touch-precomposed" href="icon.jpg" /></head><body></body></html>';
alert($(theHTML).filter('link[rel="apple-icon-touch-precomposed"]').attr('href'));
JSFiddle Demo
I'm not sure if you can use .find that way, I'd have to read the API about it. But, you can try .prop('href') instead of .attr('href'). If that doesn't work, I'd also suggest using an * after the = like link[rel=*"apple-icon-touch-precomposed"]