Question

我的列表中有一个类似于提供的html代码的条目。单击编辑按钮时，我想将复选框值更改为其他值。

这只是我列表中许多虚拟中的一个，所以我提出的代码也是在html代码下提供的。

<div class="checkbox">
    <label class="form-checkbox form-normal form-primary active">
        <input class="category" name="category" type="checkbox"> Vale to be changed
    </label>
    <a href="#" data-id="1" data-name="A value" class="btn btn-primary btn-xs edit">Edit</a>
    <a href="#" data-id="1" class="btn btn-danger btn-xs del">Delete</a>
</div>

Jquery简单的例子：

$(document).ready(function(){
    response = true;

    if(response){
        $('.edit').prev('label').find('.category').text('new value');
    }
});

Answer 1

您遇到的问题是，您尝试定位的文本位于textNode中，因此您需要使用content()和filter()来查找并修改它，如下所示：

$('.btn.edit').click(function() {
  $(this).closest('.checkbox').find('label').contents().filter(function() {
    return this.nodeType == 3 && this.nodeValue.trim();
  })[0].nodeValue = 'new value';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <label class="form-checkbox form-normal form-primary active">
    <input class="category" name="category" type="checkbox">Vale to be changed
  </label>
  <a href="#" data-id="1" data-name="A value" class="btn btn-primary btn-xs edit">Edit</a>
  <a href="#" data-id="1" class="btn btn-danger btn-xs del">Delete</a>
</div>

如果将textNode包装在自己的元素中，例如span：

，则可以使此过程更简单

$('.btn.edit').click(function() {
  $(this).closest('.checkbox').find('label span').text('new value');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <label class="form-checkbox form-normal form-primary active">
    <input class="category" name="category" type="checkbox"> <span>Vale to be changed</span>
  </label>
  <a href="#" data-id="1" data-name="A value" class="btn btn-primary btn-xs edit">Edit</a>
  <a href="#" data-id="1" class="btn btn-danger btn-xs del">Delete</a>
</div>

如何在<li>列表中查找和更新特定元素

1 个答案: