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/
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()
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"]
If my original function was:
document.getElementsByClassName('blah')[9].innerHTML = 'blah';
...how would I change that so I get that same item in jquery? I have this, but when I put '[9]' at the end it doesnt work:
$(data).find('.blah')[9].html();
It I leave the [9] out, it only gets the first item whose class name is 'blah', and I want it to get the 10th item.
The equivalent of
document.getElementsByClassName('blah')[9].innerHTML = 'blah';
is to use the :eq pseudo-selector:
$(".blah:eq(9)").html('blah');
or the eq function:
$(".blah").eq(9).html('blah');
(...and then the html function to set the inner HTML.)
See what you are looking for is :eq():
$('.blah').eq(9).html('blah');
because :eq() is 0 indexed,so :eq(9) will find the item at 10th index.
.eq() jQuery doc
There is :nth-child() function too:
$('.blah:nth-child(10)').html('blah');
because :nth-child() is 1 indexed so you have to give place 10th position there.
:nth-child() jQuery doc
from the docs:
Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as :eq() or :even jQuery follows JavaScript's "0-indexed" counting. Given a single containing two s, $('li:nth-child(1)') selects the first while $('li:eq(1)') selects the second.
try the following
$('.blah').eq(9).html('blah');
Try this
$('.blah').eq(9).html('blah');
You should also just be able to use jQuery's get() method:
$('.blah').get(9)
jQuery objects also function as indexed arrays as returned elements, so this should also work:
$('.blah')[9]
Another answer could be:
$($(data).find('.blah')[9]).html();
When you use [9] it returns a DOM object which doesn't know what function html() is but without [9] it returns a jQuery Object which the html() function is apart of.
Try this
$(".blah:eq(9)").html('blah');
$('.blah')[9].innerHTML="BLAH";
This should solve your problem
I need to reset some text-boxes which only have an unique name (not an unique id).
I tried it with jQuery, but my code seems to do nothing:
$('input[name=customergroupname]').value="";
Try this:
$('input[name="customergroupname"]').val("");
Getting and setting value of form elements wrapped in a jQuery object is being done with use jQuery val function:
$('input[name="customergroupname"]').val("");
.value can only be used for DOM elements, like this:
$('input[name="customergroupname"]').eq(0).value ="";
$(...) // This is a jQuery object.
$(...)[n] // This is a DOM object in the nth place in the set.
$(...).eq(n) // This is a DOM object in the nth place in the set.
Working demo http://jsfiddle.net/vN74v/2/
Code
$('#hullk').click(function(){ // in example when you click the button
$('input[name="customergroupname"]').val("");
});
According to DOM level 2 specifications, you can access:
document.forms["foo"].elements["customergroupname"].value = '';
If formName and fieldName are constants rather than variables you can use literal syntax:
document.forms.foo.elements.customergroupname.value = '';
try:
$('input[name="customergroupname"]').value="";
I've wrapped customergroupname in quotes.
Very true, I mixed the quotes up. Edited now.
How can I find out if an input field is anything other than a select ?
I tried with if($(el).not("select")) and I get the selects too...
if(!$(el).is("select")) {
// the input field is not a select
}
$(el).not("select") gives you array. Array is always gives true in boolean expressions. But after you apply not, this array of elements won't contain selects. See working example.
The .not() method returns a new jQuery object with everything from the original object that doesn't match the selector.
You can't just use it in an if statement like that.
Instead, you use the .is method, which checks whether the element matches a selector and returns a boolean.
if (!$(el).is('select'))
What about giving the <select> tags a class:
$(el + ":not('.select')")
if($(el).selectedIndex)
If it has a SelectedIndex property, it's a <SELECT>
if ($(el)[0].nodeName != 'select')