无法使用jQuery类选择器选择所有元素

Question

Here iam having a table data in which 3 input items which are having a common class submit3 .Whenever i want to select the 3 buttons using jQuery and want to change the value and name attributes of these elements to some other text.

Here iam including the code snippet of the data

<td colspan=2>

    <input type="submit" value="Login" class="submit3" onclick="return checknull()" tabindex="1">

    <input type="button" value="Reset" class="submit3" onclick="call_reset()" tabindex="1">

    <input type="button" value="Forgot Password ?" class="submit3" onclick="call_fgpwd()" tabindex="1">

</td>

But when iam selecting with jquery using the class selector $('.submit3') it only returning the first input submit button and it is ignoring the remaining 2.

Here original javascript is here

document.getElementsByClassName("submit3")[0].value = "something";
document.getElementsByClassName("submit3")[1].name = "something";
document.getElementsByClassName("submit3")[2].name = "something";
document.getElementsByClassName("submit3")[2].value = "something";

Now i tried converting it into jquery as

$('.submit3')[0].val("Something New")

Which resulted in error Uncaught TypeError: $(...)[0].val is not a function

Also in the console of chrome browser(Latest Version),when i run $('submit3') the output is <input type="submit" value="Login" class="submit3" onclick="return checknull()" tabindex="1">

Answer 1

In your code $('.submit3')[0] returns the dom object, you can't use jQuery val() method with it. You can set value property to update the value.

$('.submit3')[0].value = "Something New"

or use eq() method to get jQuery object using index

$('.submit3').eq(0).val("Something New")
// or $('.submit3:eq(0)').val("Something New")

Answer 2

When you convert a jQuery collection $('.submit3') to $('.submit3')[0] - raw DOM element [HTMLElement] , the jQuery properties don't work. Use plain JS properties.

$( ".foo" )[ 0 ] // is equivalent to document.getElementsByClassName( "foo" )[0]

Use

$('.submit3')[0].value = ...

or alternatively

$('.submit3').get(0).value = ..