<div id="test"></div>
<script>
$(document).ready(function() {
alert($('#test').id);
});
</script>
Чому вищезгадане не працює, і як мені це зробити?
<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;
та причина, за якою використовується $('#test').get(0)
JQuery або навіть $('#test')[0]
є те, що $('#test')
це селектор JQuery і повертає масив () результатів не один елемент за замовчуванням
альтернативою селектору DOM в jquery є
$('#test').prop('id')
який відрізняється від .attr()
та $('#test').prop('foo')
захоплює вказане foo
властивість DOM , в той час як $('#test').attr('foo')
захоплює вказаний foo
атрибут HTML, і ви можете дізнатися більше деталей про відмінності тут .
$('#test').id()
.
$('selector').attr('id')
поверне ідентифікатор першого відповідного елемента. Довідково .
Якщо ваш зібраний набір містить більше одного елемента, ви можете використовувати звичайний .each
ітератор для повернення масиву, що містить кожен з ідентифікаторів:
var retval = []
$('selector').each(function(){
retval.push($(this).attr('id'))
})
return retval
Або, якщо ви готові отримати трохи крихітніші, ви можете уникнути обгортки і скористатися .map
ярликом .
return $('.selector').map(function(index,dom){return dom.id})
retval.push($(this).attr('id'))
можна записатиretval.push(this.id)
return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); })
id
є властивістю html Element
. Однак, коли ви пишете $("#something")
, він повертає об’єкт jQuery, який обертає відповідні елементи DOM. Щоб повернути перший відповідний елемент DOM, зателефонуйтеget(0)
$("#test").get(0)
На цьому нативному елементі ви можете викликати ідентифікатор або будь-яке інше властиве значення або функцію DOM
$("#test").get(0).id
Ось чому причина id
не працює у вашому коді.
Крім того, використовуйте attr
метод jQuery, оскільки інші відповіді пропонують отримати id
атрибут першого відповідного елемента.
$("#test").attr("id")
Наведені вище відповіді чудові, але як розвивається jquery .. тож ви також можете робити:
var myId = $("#test").prop("id");
attr()
був доданий в 1.0, а prop()
в 1.6, тому я припускаю, що ваш коментар prop()
- це новий спосіб.
attr
) або потенційно модифікований скриптом ( prop
). Якщо ви на самому ділі не змінюючи id
атрибут будь-якого елементу , використовуючи клієнтський скрипт, то prop
і attr
ідентичні.
.id
не є дійсною функцією jquery. Потрібно використовувати .attr()
функцію для доступу до атрибутів, якими володіє елемент. Можна використовувати.attr()
як змінити значення атрибута, вказавши два параметри, або отримати значення, вказавши один.
Ну, схоже, рішення не знайшлося, і я хотів би запропонувати власне рішення, яке є розширенням прототипу JQuery. Я поміщаю це у файл Helper, який завантажується після бібліотеки JQuery, звідси і чек на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, тому його не можна просто використовувати object.id
щоб отримати йогоId
вам потрібно скористатися $('#test').attr('id')
, що поверне потрібнеID
вам елементи
Це також можна зробити так,
$('#test').get(0).id
що дорівнює document.getElementById('test').id
$('#test')[0].id
те саме, що.get(0)
Можливо, корисно для інших, хто знайде цю тему. Код нижче буде працювати, лише якщо ви вже використовуєте 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();
Це старе запитання, але станом на 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!
Оскільки id є атрибутом, ви можете отримати його за допомогою attr
методу.
Це може бути ідентифікатор елемента, клас або автоматично з використанням парного
------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================
Важливо: якщо ви створюєте новий об'єкт за допомогою jQuery і прив'язуєте подію, ви ОБОВ'ЯЗКОВО використовувати проп, а не attr , як це:
$("<div/>",{ id: "yourId", class: "yourClass", html: "<span></span>" }).on("click", function(e) { alert($(this).prop("id")); }).appendTo("#something");
Це нарешті вирішить ваші проблеми:
скажемо, у вас на сторінці багато кнопок, і ви хочете змінити одну з них за допомогою jQuery Ajax (або не ajax) залежно від їх ідентифікатора.
дозвольмо також сказати, що у вас є багато різних типів кнопок (для форм, для затвердження та для подібних цілей), і ви хочете, щоб jQuery обробляв лише кнопки "як".
ось код, який працює: jQuery буде обробляти лише кнопки класу .cls-hlpb, він прийме ідентифікатор кнопки, яку натиснули, і змінить її відповідно до даних, що надходять від 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 та змінено.
<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));
}
}
?>