Question

我必须能够使用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”标签的ID赋予我的元素的位置保存在常规变量中。

我编写了这个迷你功能，当按下修饰键时会激活该功能。

var poscorr;

$(document).ready(function(){

$("#lista1").on('click', 'button', function() {

    poscorr = $("#li").attr("id");

    alert(poscorr);

    });
});

但是警报的输出未定义。为什么？有什么解决办法吗？

Answer 1

poscorr = $("li#1").attr("id");

OR

poscorr = $("li").eq(0).attr("id");

有关更多详细信息： https://api.jquery.com/id-selector/

Answer 2

您不必保存在具有attr的变量中，

尝试一下：

app.filter('startsWith', function () {
    return function (items, input) {
        if(input === undefined || input.length === 0){
          return items;
        }

        var filtered = [];
        var inputMatch = new RegExp(input, 'i');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (inputMatch.test(item.Type.substring(0, input.length))) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

OR

poscorr=$("#li");
alert(poscorr);

Answer 3

您正在使用#li这是一个ID选择器，但实际上，您有一个<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>

Answer 4

您可以使用以下代码获取 li 标签的位置。为了获得最佳实践，您需要为每个li标签提供一个相同的类，例如 list-hit 。然后，您应该使用jquery的 click 功能。

<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.log($(this).attr('id');
});

});

保存jQuery列表元素的位置

4 个答案: