JQueryを使用して要素のIDを取得する方法
<div id="test"></div>
<script>
$(document).ready(function() {
alert($('#test').id);
});
</script>
なぜ上記のように動作しないのですか？
JQueryの方法：
$('#test').attr('id')
あなたの例では：
<div id="test"></div>
$(document).ready(function() {
alert($('#test').attr('id'));
});
または、DOMを介して：
$('#test').get(0).id;
あるいは ：
$('#test')[0].id;
また、JQueryで$('#test').get(0)または$('#test')[0]を使用する理由は、$('#test')がJQueryセレクターであり、が結果のarray（）を返すことですデフォルトの機能では単一の要素ではない
jqueryのDOMセレクターの代替は
$('#test').prop('id')
.attr()および$('#test').prop('foo')とは異なり、指定されたDOM fooプロパティを取得しますが、$('#test').attr('foo')は指定されたHTML foo属性を取得し、違いに関する詳細を確認できます。 ここ 。
$('selector').attr('id')は最初にマッチした要素のIDを返します。 参照 。
マッチしたセットに複数の要素が含まれている場合は、従来の.eachイテレータ を使用して、それぞれのIDを含む配列を返すことができます。
var retval = []
$('selector').each(function(){
retval.Push($(this).attr('id'))
})
return retval
あるいは、ちょっと辛いことを望んでいるのなら、ラッパーを避けて.mapshortcut を使うことができます。
return $('.selector').map(function(index,dom){return dom.id})
idは、html Elementのプロパティです。ただし、$("#something")を書くと、一致するDOM要素をラップするjQueryオブジェクトが返されます。最初に一致したDOM要素を取り戻すには、get(0)を呼び出します。
$("#test").get(0)
このネイティブ要素では、id、または他のネイティブDOMプロパティまたは関数を呼び出すことができます。
$("#test").get(0).id
それがidがあなたのコードで機能しない理由です。
あるいは、jQueryのattrメソッドを使用して、最初の一致要素のid属性を取得することをお勧めします。
$("#test").attr("id")
上記の答えは素晴らしいですが、jqueryが進化するにつれて..あなたもできるようになります。
var myId = $("#test").prop("id");
$.fn.extend({
id : function() {
return this.attr('id');
}
});
alert( $('#element').id() );
いくつかのチェックコードはもちろん必要ですが、簡単に実装できます。
.idは有効なjquery関数ではありません。要素が持つ属性にアクセスするには.attr()関数を使う必要があります。 .attr()を使用すると、2つのパラメータを指定して属性値を変更することも、1つを指定して値を取得することもできます。
ある要素のIDを取得したい場合は、その特定の要素に対してイベント（この場合はclickイベント）が発生したときにクラスセレクターを使用してみましょう。
$('.your-selector').click(function(){
var id = $(this).attr('id');
});
さて、解決策がまだなかったようで、JQueryプロトタイプの拡張である私自身の解決策を提案したいと思います。私はこれをJQueryライブラリの後にロードされるHelperファイルに入れました、それでwindow.jQueryのチェック
if (window.jQuery) {
$.prototype.id = function () {
if (this.length > 1) {
var val = [];
this.each(function (idx, el) {
val.Push($(el).id());
});
return val;
} else {
return this.attr('id');
}
}
}
それは完璧ではないかもしれませんが、それはJQueryライブラリに含まれるようになるかもしれません。
単一の文字列値または文字列値の配列を返します。文字列値の配列は、複数要素セレクタが使用されたイベント用です。
$('#test')はjQueryオブジェクトを返すので、Idを取得するために単にobject.idを使うことはできません。
あなたは$('#test').attr('id')を使う必要があります、それはあなたの必要な要素のIDを返します
これは次のようにもできます。
$('#test').get(0).idと等しいdocument.getElementById('test').id
たぶん、このスレッドを見つけた人にとっては役に立つでしょう。以下のコードは、すでにjQueryを使用している場合にのみ機能します。この関数は常に識別子を返します。要素が識別子を持たない場合、関数は識別子を生成し、これを要素に追加します。
var generatedIdCounter = 0;
$.fn.id = function() {
var identifier = this.attr('id');
if(!identifier) {
generatedIdCounter++;
identifier = 'isGenerated_' + generatedIdCounter;
this.attr('id', identifier);
}
return identifier;
}
使い方：
$('.classname').id();
$('#elementId').id();
$('#test').attr('id')あなたの例では：
<div id="test"></div>
$(document).ready(function() {
alert($('#test').attr('id'));
});
これは古い質問です、 しかし2015年現在 これは実際にうまくいくかもしれません：
$('#test').id;
また、代入することもできます。
$('#test').id = "abc";
次のJQueryプラグインを定義する限り、
Object.defineProperty($.fn, 'id', {
get: function () { return this.attr("id"); },
set: function (newValue) { this.attr("id", newValue); }
});
興味深いことに、elementがDOM要素の場合、次のようになります。
element.id === $(element).id; // Is true!
$('tagname').attr('id');
上記のコードを使うとidを取得できます。
これは要素ID、クラス、または自動的に
------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================
<html>
<head>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<?php
// include Database connection file
include("db_connection.php");
// Design initial table header
$data = '<table class="table table-bordered table-striped">
<tr>
<th>No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Update</th>
<th>Delete</th>
</tr>';
$query = "SELECT * FROM users";
if (!$result = mysqli_query($con, $query)) {
exit(mysqli_error($con));
}
// if query results contains rows then featch those rows
if(mysqli_num_rows($result) > 0)
{
$number = 1;
while($row = mysqli_fetch_assoc($result))
{
$data .= '<tr>
<td>'.$number.'</td>
<td>'.$row['first_name'].'</td>
<td>'.$row['last_name'].'</td>
<td>'.$row['email'].'</td>
<td><button onclick="DeleteUser('.$row['id'].')" class="btn btn-danger">Delete</button>
</td>
</tr>';
$number++;
}
}
else
{
// records now found
$data .= '<tr><td colspan="6">Records not found!</td></tr>';
}
$data .= '</table>';
echo $data;
?>
<script type="text/javascript">
function DeleteUser(id) {
var conf = confirm("Are you sure, do you really want to delete User?");
if (conf == true) {
$.ajax({
url:'deleteUser.php',
method:'POST',
data:{
id:id
},
success:function(data){
alert('delete successfully');
}
}
});
deleteUser.php
<?php
// check request
if(isset($_POST['id']) && isset($_POST['id']) != "")
{
// include Database connection file
include("db_connection.php");
// get user id
$user_id = $_POST['id'];
// delete User
$query = "DELETE FROM users WHERE id = '$user_id'";
if (!$result = mysqli_query($con, $query)) {
exit(mysqli_error($con));
}
}
?>
これでようやく問題が解決します。
ページにたくさんのボタンがあり、そのIDに応じてjQuery Ajax（またはajaxではない）でそれらのボタンの1つを変更したいとしましょう。
さまざまな種類のボタン（フォーム用、承認用など）があり、jQueryには "like"ボタンのみを処理させたいとします。
これが機能しているコードです：jQueryはクラス.cls-hlpbのボタンだけを扱い、クリックされたボタンのIDを取り、ajaxから来るデータに従ってそれを変更します。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$(".clshlpbtn").on('click',function(e){
var id = $(e.target).attr('id');
alert("The id of the button that was clicked: "+id);
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data,status){
//parsing the data should come here:
//var obj = jQuery.parseJSON(data);
//$("#"+id).val(obj.name);
//etc.
if (id=="btnhlp-1")
$("#"+id).attr("style","color:red");
$("#"+id).val(data);
});
});
});
</script>
</head>
<body>
<input type="button" class="clshlpbtn" id="btnhlp-1" value="first btn"> </input>
<br />
<input type="button" class="clshlpbtn" id="btnhlp-2" value="second btn"> </input>
<br />
<input type="button" class="clshlpbtn" id="btnhlp-9" value="ninth btn"> </input>
</body>
</html>
コードはw3schoolsから取得され変更されました。
id は属性なので、attrメソッドを使用して取得できます。
重要：jQueryを使用して新しいオブジェクトを作成し、イベントをバインドする場合、MUST usepropではなくattr、次のように：
$("<div/>",{ id: "yourId", class: "yourClass", html: "<span></span>" }).on("click", function(e) { alert($(this).prop("id")); }).appendTo("#something");
oPには答えませんが、他の人にとっては興味深いかもしれません。この場合は.idフィールドにアクセスできます。
$('#drop-insert').map((i, o) => o.id)