help with selectors and attr
Can someone please tell me why the following doesn't work?
<select name='s[columns][1]' id='s_columns_1'>
<option>title</option>
<option>body</option>
</select>
$('select[name*="columns"]')[0].attr('name')
It tells me attr is not a function.
$('select[name*="columns"]')[0]
returns a reference to the select field but I cannot access or update any attributes.
Here is my full code if you want it.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.searches').length;
var newNum = new Number(num + 1);
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#search_' + num).clone().attr('id', 'search_' + newNum);
//rename the fields to their new index
newElem.find('select, input').each(function(i) {
this.name= this.name.replace(/\[\d\]/, '['+newNum+']');
this.id= this.id.replace(/_\d/, '_'+newNum);
});
// el = newElem.find('select[name*="columns"]')[0]; //select columns
// alert(el.attr("name"));
// insert the new element after the last "duplicatable" input field
$('#search_' + num).after(newElem);
});
});
</script>
</head>
<body>
<form action='' method='post'>
<div class='searches' id='search_1'>
<select name='s[columns][1]' id='s_columns_1'>
<option>title</option>
<option>body</option>
</select>
<select type='text' name='s[conditions][1]' id='s_conditions_1'>
<option>like</option>
<option>equals</option>
</select>
<input type='text' name='s[values][1]' id='s_values_1'>
</div>
<button type='button' id='btnAdd'>Add</button>
<input type='submit' value='search'>
</form>
</body>
</html>
Cheers