<div id="test"></div>
<script>
$(document).ready(function() {
alert($('#test').id);
});
</script>
Mengapa doesn't di atas bekerja, dan bagaimana saya harus melakukan ini?
JQuery cara:
$('#test').attr('id')
Dalam contoh anda:
$(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>
Atau melalui DOM:
$('#test').get(0).id;
atau bahkan :
$('#test')[0].id;
dan alasan di balik penggunaan $('#tes').get(0)
di JQuery atau bahkan $('#tes')[0]
adalah bahwa $('#tes')
adalah JQuery selector dan mengembalikan array() dari hasil tidak satu elemen dengan fungsi default
alternatif untuk DOM selector di jquery
$('#test').prop('id')
yang berbeda dari .attr()
dan $('#tes').prop('foo')
meraih ditentukan DOM foo
properti, sementara $('#tes').attr('foo')
meraih ditentukan HTML foo
atribut dan anda dapat menemukan rincian lebih lanjut tentang perbedaan di sini.
$('pemilih').attr('id')
akan kembali id pertama dicocokkan elemen. Referensi.
Jika anda cocok set berisi lebih dari satu elemen, anda dapat menggunakan konvensional .masing-masing
iterator untuk mengembalikan array yang berisi masing-masing id:
var retval = []
$('selector').each(function(){
retval.push($(this).attr('id'))
})
return retval
Atau, jika anda're bersedia untuk mendapatkan sedikit lebih bertekad, anda dapat menghindari wrapper dan gunakan .peta
shortcut.
return $('.selector').map(function(index,dom){return dom.id})
id
adalah properti dari sebuah html Elemen
. Namun, ketika anda menulis $("#sesuatu")
, itu kembali objek jQuery yang membungkus pencocokan elemen DOM(s). Untuk mendapatkan yang pertama pencocokan elemen DOM kembali, panggilan get(0)
$("#test").get(0)
Pada elemen asli, anda dapat menghubungi id, atau lainnya asli DOM properti atau fungsi.
$("#test").get(0).id
Yang's alasan mengapa id
isn't bekerja dalam kode anda.
Atau, menggunakan jQuery's y
metode sebagai jawaban yang lain menyarankan untuk mendapatkan id
atribut dari elemen pertama yang cocok.
$("#test").attr("id")
.id
adalah tidak sah fungsi jquery. Anda perlu menggunakan .attr()
fungsi untuk mengakses atribut suatu elemen yang memiliki. Anda dapat menggunakan .attr()
untuk mengubah nilai atribut dengan menentukan dua parameter, atau mendapatkan nilai dengan menentukan satu.
Jika anda ingin mendapatkan ID dari sebuah elemen, let's mengatakan dengan class selector, ketika sebuah peristiwa (dalam hal ini klik event) yang dipecat pada elemen tertentu, maka berikut ini akan melakukan pekerjaan:
$('.your-selector').click(function(){
var id = $(this).attr('id');
});
Nah, tampaknya belum ada solusi dan ingin mengusulkan saya sendiri solusi yang merupakan perluasan dari JQuery prototype's. Saya menempatkan ini dalam Pembantu file yang di-load setelah JQuery library, maka periksa jendela.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');
}
}
}
Mungkin tidak sempurna, tetapi itu adalah awal yang baik untuk mungkin mendapatkan dimasukkan ke dalam library JQuery.
Mengembalikan salah satu nilai string atau Array dari nilai-nilai string. Array dari string nilai-nilai, adalah untuk acara multi-elemen selector digunakan.
$('#tes')
mengembalikan objek jQuery, sehingga anda dapat't gunakan hanya objek.id
untuk mendapatkan Id
anda perlu menggunakan $('#tes').attr('id')
, yang mengembalikan anda diperlukan ID
dari elemen
Hal ini juga dapat dilakukan sebagai berikut ,
$('#tes').get(0).id
yang setara dengan dokumen.getElementById('test').id
Mungkin berguna bagi orang lain yang menemukan thread ini. Kode di bawah ini hanya akan bekerja jika anda sudah menggunakan jQuery. Fungsi kembali selalu pengenal. Jika elemen doesn't memiliki identifier yang berfungsi menghasilkan identifier dan menambahkan ini ke elemen.
var generatedIdCounter = 0;
$.fn.id = function() {
var identifier = this.attr('id');
if(!identifier) {
generatedIdCounter++;
identifier = 'isGenerated_' + generatedIdCounter;
this.attr('id', identifier);
}
return identifier;
}
Bagaimana untuk menggunakan:
$('.classname').id();
$('#elementId').id();
Ini adalah pertanyaan lama, tapi pada tahun 2015 ini dapat benar-benar bekerja:
$('#test').id;
Dan anda juga dapat membuat tugas-tugas:
$('#test').id = "abc";
Selama anda tentukan berikut ini plugin JQuery:
Object.defineProperty($.fn, 'id', {
get: function () { return this.attr("id"); },
set: function (newValue) { this.attr("id", newValue); }
});
Menariknya, jika elemen
adalah elemen DOM, maka:
element.id === $(element).id; // Is true!
Ini bisa menjadi elemen id , class , atau secara otomatis menggunakan bahkan
------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================
Karena id adalah suatu atribut, anda bisa mendapatkannya dengan menggunakan y
metode.
Penting: jika anda membuat objek baru dengan jQuery dan mengikat suatu acara, anda *HARUS ** menggunakan prop dan y*, seperti ini:
$("<div/>",{ id: "yourId", kelas: "yourClass", html: "<span></span>" }).pada("klik", function(e) { alert($(this).prop("id")); }).appendTo("#sesuatu");
Ini akhirnya akan memecahkan masalah anda:
katakanlah anda memiliki banyak tombol pada halaman dan anda ingin mengubah salah satu dari mereka dengan jQuery Ajax (atau tidak ajax) tergantung pada ID mereka.
mari juga mengatakan bahwa anda memiliki banyak jenis yang berbeda dari tombol (untuk bentuk, untuk mendapatkan persetujuan dan untuk seperti tujuan), dan anda ingin jQuery untuk mengobati hanya "seperti" tombol.
berikut adalah kode yang bekerja: jQuery akan memperlakukan hanya tombol yang dari kelas .cls-hlpb, itu akan mengambil id dari tombol yang diklik dan akan berubah sesuai dengan data yang berasal dari 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>
kode diambil dari w3schools dan berubah.
<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));
}
}
?>