jQuery selector with string object not working - javascript

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"]

Related

How can I use ".attr('disabled', false)" to btn[0]? [duplicate]

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()

use 'this' keyword along with css pseudo selectors

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

How to handle multiple instances of a single class in jQuery?

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 :)

Select an element by its index without jquery

I have nothing but only this useless code:
document.getElementsByClassName('dynamic_area').index(input+4);
What is my mistake?
Important:
Don't use jQuery,
input is a variable
Just use a regular array index:
document.getElementsByClassName('dynamic_area')[input + 4];
Here's the fiddle: http://jsfiddle.net/eYmXE/
If you wanted to use a method, change .index to .item...
document.getElementsByClassName('dynamic_area').item(input+4);
http://jsfiddle.net/FfMJz/

Using jQuery what's the way to get all elements of a queried set EXCEPT the first.

Using jQuery what's the way to get all elements of a queried set EXCEPT the first. I forget offhand.
You can do:
$(selector).not(':first');
Or:
$('selector:not(:first)');
I believe you are refering to the NOT selector .
$("div.someClass:not(div.someClass:first)")
Assuming of course you are looking for div.someClass. This might be a bit verbose, but I think it works. Haven't tested.
Another option is the gt selector (greater than):
$('selector:gt(0)');
or
$('selector').gt(0);
:not(:first) is more readable, but also a bit longer.
You could also use the splice method, e.g.
var nodes = $(selector);
nodes.splice(0, 1);

Categories

Resources