<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')
захватывает указанное свойство DOM foo
, в то время как $('#test').attr('foo')
захватывает указанный атрибут HTML foo
и вы можете найти более подробную информацию о различиях здесь.
$('selector').attr('id')
вернет id первого найденного элемента. Ссылка.
Если ваш набор содержит более одного элемента, вы можете использовать обычный .each
iterator, чтобы вернуть массив, содержащий каждый из идентификаторов:
var retval = []
$('selector').each(function(){
retval.push($(this).attr('id'))
})
return retval
Или, если вы хотите немного поработать, вы можете обойтись без обертки и использовать .map
shortcut.
return $('.selector').map(function(index,dom){return dom.id})
id
является свойством html Element
. Однако, когда вы пишете $("#something")
, возвращается объект jQuery, который обертывает соответствующий элемент(ы) DOM. Чтобы получить первый подходящий элемент DOM, вызовите get(0)
.
$("#test").get(0)
На этом родном элементе можно вызвать id или любое другое родное свойство или функцию DOM.
$("#test").get(0).id
Это причина, по которой id
не работает в вашем коде.
В качестве альтернативы используйте метод jQuery attr
, как предлагают другие ответы, чтобы получить атрибут id
первого подходящего элемента.
$("#test").attr("id")
.ID
- это не действительный функции jQuery. Вы должны использовать .функция м()
для доступа к атрибутам элемента обладает. Вы можете использовать `.м () как изменить значение атрибута путем задания двух параметров, или получить значение, определяя одно.
Если вы хотите получить идентификатор элемента, позвольте'ы сказать селектора класса, когда событие (в данном случае событие click) был уволен в тот конкретный элемент, то следующий будет делать эту работу:
$('.your-selector').click(function(){
var id = $(this).attr('id');
});
Ну, кажется, не было решения и хотел бы предложить мое собственное решение, является расширение библиотеки jQuery прототипа'ов. Я положил это в вспомогательный файл, который загружается после библиотеки jQuery, поэтому проверьте окна.в 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
.
Может быть полезно для других, что найти эту нить. Приведенный ниже код будет работать только если вы уже используете jQuery. Функция всегда возвращает идентификатор. Если элемент не't имеет идентификатор функция генерирует идентификатор и добавить данный элемент.
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); }
});
Интересно, если "элемент" - это элемент DOM, то:
element.id === $(element).id; // Is true!
Это может быть идентификатор элемента , класса или автоматически с помощью даже
------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================
С ИД является атрибутом, вы можете сделать это с помощью м
метод.
Важно: если вы создаете новый объект с помощью jQuery и обязательное мероприятие, вы *должны ** использовать опора, а не до*, как это:
$(" в<див/>" в,{ ИД: "по yourId наша" Класс "и в yourclass-то", так и" в<промежуток></службы>", у }).на (на"нажмите", функция(е) { Алерт($(это).проп (на"идентификатор", у)); }).добавление(" и#что-то");
Это позволит, наконец, решить ваши проблемы:
допустим, у вас есть много кнопок на странице, и вы хотите изменить один из них с jQuery Аякс (или не Аякс) в зависимости от их ID.
давайте также сказать, что у вас много разных типа кнопок (для форм, для утверждения и для как целей), и вы хотите, чтобы jQuery, чтобы лечить только в "как и" кнопки.
здесь это код, который работает: в jQuery будет лечить только кнопки, которые относятся к классу .ЦБС-hlpb, он будет принимать ID кнопки, которая была нажата и изменять ее в зависимости от данных, которые поступают от "Аякса".
<!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));
}
}
?>