jQuery attr（）返回未定义

Question

I'm using jquery function attr() to fetch a input element' custom attribute. However this function returns undefined in Chrome. I tried to print this element and the result is:

[prevObject: o.fn.init[1], context: document, selector: "input[name="money",uid="1"]", jquery: "2.1.0", constructor: function…]

Following are my js codes:

$('.panel').each(function(index, element) {
    var uid = $(this).attr('uid');
    console.log($(this));
    var moneyMinusBtn = $(this).find('.btn-money-minus')[0];
    var moneyPlusBtn = $(this).find('.btn-money-plus')[0];
    var moneyInput = $(this).find('input[name="money"]')[0];
    console.log($('input[name="money",uid="'+uid+'"]').attr('uid'));
}

HTML code:

 <input type="number" class="form-control" name="money" value="<?php echo $node['money'] ?>" uid="1" />

Answer 1

The problem is in the way you're chaining the attribute selectors. This will work:

$('input[name="money"][uid="'+uid+'"]').attr('uid')

It might also be a good idea to use data-* attributes.

Answer 2

You need to check the rendered HTML to make sure that PHP wrote right values, but anyway, I think you cannot require two attributes in the way you showed:

$('input[name="money",uid="'+uid+'"]')

Try changing it into:

$('input[name="money"][uid="'+uid+'"]')

Or even (might be faster selector, otherwise the same):

 $('input').filter('[name="money"][uid="'+uid+'"]') 

Note there is no space or separator of any kind between [name="money"] and [uid="'+uid+'"] .

See comments for performance discussion.