Сохраняет позицию элемента списка jquery
Я должен уметь управлять списком с помощью jquery.
Я уже создал список с элементом:
<ul id = "lista1" class = "list-group">
<li id = "1" class = "list-group-item d-flex justify-content-between align-items-center">
<p id = "elem1"> Carne </p>
<button id = "mod" class = "badge badge-primary badge-pill" data-toggle = "modal" data-target = "#myModal">Modifica</button>
</li>
</ul>
Теперь я хотел бы иметь возможность изменять элемент, но я хотел бы иметь возможность сохранять в общей переменной положение элемента, заданное мне идентификатором тега «li».
Я написал эту мини-функцию, которая активируется при нажатии клавиши-модификатора.
var poscorr;
$(document).ready(function(){
$("#lista1").on('click', 'button', function() {
poscorr = $("#li").attr("id");
alert(poscorr);
});
});
Но вывод предупреждения не определен. Почему? У тебя есть какое-нибудь решение?
Ответы 4
poscorr = $("li#1").attr("id");
ИЛИ
poscorr = $("li").eq(0).attr("id");
Больше подробностей: https://api.jquery.com/id-selector/
Вам не нужно сохранять переменную с атрибутом attr,
Попробуй это:
poscorr=$("#li");
alert(poscorr);
ИЛИ
poscorr=$("li").attr('id');
Вы используете #li, который является селектором идентификатора, но на самом деле у вас есть <li> как элемент, для которого вы хотите получить значение id. Таким образом, вам нужно использовать селектор элементов, который является $('li'):
$(document).ready(function() {
$("#lista1").on('click', 'button', function() {
poscorr = $(this).closest('li').attr('id');
alert(poscorr);
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id = "lista1" class = "list-group">
<li id = "1" class = "list-group-item d-flex justify-content-between align-items-center">
<p id = "elem1"> Carne </p>
<button id = "mod" class = "badge badge-primary badge-pill" data-toggle = "modal" data-target = "#myModal">Modifica</button>
</li>
<li id = "2" class = "list-group-item d-flex justify-content-between align-items-center">
<p id = "elem2"> Fish </ p>
<button id = "mod" class = "badge badge-primary badge-pill" data-toggle = "modal" data-target = "# myModal"> Modifica </ button>
</ li>
</ul>Если я добавлю новый элемент, результатом всегда будет 1, а не 2 во втором случае <li id = "2" class = "list-group-item d-flex justify-content-between align-items-center"> < p id = "elem2"> Рыба </ p> <button id = "mod" class = "badge badge-primary badge-pill" data-toggle = "modal" data-target = "# myModal"> Модификация </ button > </ li>
@ Benix89 вам нужно значение id в цикле?
Остальные элементы будут добавлены в список с помощью функции code var contael = 1; $ (документ) .ready (function () {$ ("# elemagg"). keypress (function (e) {if (e.which == 13) {var elemento = $ ("# elemagg"). val () ; $ ("# lista1"). append ("<li id = '" + ++ contael + "' class = 'list-group-item d-flex justify-content-between align-items-center'> <p id = 'elem "+ contael +"'> "+ elemento +" </p> <button id = 'mod' class = 'badge badge-primary badge-pill' data-toggle = 'modal' data-target = ' #myModal '> Модификация </button> ");}});}); code
Вы можете использовать приведенный ниже код, чтобы узнать позицию вашего тега Ли. Для наилучшей практики вам нужно указать тот же класс, например список, для каждого тега li. Затем вы должны использовать функцию щелкнуть jquery.
<ul id = "lista1" class = "list-group">
<li id = "1" class = "list-hit list-group-item d-flex justify-content-between align-items-center">
<p id = "elem1"> Carne </p>
<button id = "mod" class = "badge badge-primary badge-pill" data-toggle = "modal" data-
target = "#myModal">Modifica</button>
</li>
</ul>
В вашем jquery напишите код для щелчка события jquery
$(document).ready(function(){
$(".list-hit").click(function(){
console.info($(this).attr('id');
});
});
$("li#1").attr("id");не имеет никакого смысла, поскольку вы уже знаете, что идентификатор -1, выполнивli#1