<div id="test"></div>
<script>
$(document).ready(function() {
alert($('#test').id);
});
</script>
なぜ上記の方法ではうまくいかないのか、どうすればいいのか。
jQueryのやり方です。
$('#test').attr('id')
あなたの例では
$(document).ready(function() {
console.log($('#test').attr('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>
あるいは、DOMを介して
$('#test').get(0).id;
あるいは、:
$('#test')[0].id;
JQueryで$('#test').get(0)
を使ったり、$('#test')[0]
を使ったりする理由は、$('#test')
はJQueryのセレクタであり、デフォルトの機能では単一の要素ではなく、結果の配列()を返すからです。
jqueryのDOMセレクタの代わりになるものは
$('#test').prop('id')
これは .attr()
とは異なり、$('#test').prop('foo')
は指定された DOM の foo
プロパティを取得し、$('#test').attr('foo')
は指定された HTML の foo
属性を取得するもので、その違いについては こちら を参照してください。
$('selector').attr('id')
は、最初にマッチした要素のidを返します。参考を参照してください。
マッチしたセットに複数の要素が含まれている場合は、従来の .each
iterator を使って、それぞれのidを含む配列を返すことができます。
var retval = []
$('selector').each(function(){
retval.push($(this).attr('id'))
})
return retval
また,少し面倒なことをしてもいいのであれば,ラッパーを使わずに .map
[ショートカット][3] を使うこともできます.
return $('.selector').map(function(index,dom){return dom.id})