Question

所以，我正在编写一些动态创建DOM元素的JS。以下是创建的元素的结构：

<div class='list_item' key='1'>
    <p>Hello, World!</p>
</div>

<div class='cont' key='1'>
    <input type='checkbox' name='test'/>
</div>

当触发事件时，我想循环遍历所有.list_item，并使用.cont属性作为标识符找到其对应的key。我想找到.cont > input[type="checkbox"]的价值。

到目前为止，这是我的代码：

$('.list_item').each(function() {
    var x = $('.cont[key="' + $(this).attr('key') + '"]').find('input[type="checkbox"]').prop('checked');
    console.log(x);
});

我的代码不会获得true或false响应，而是抛出undefined作为结果。我可以对我的代码做什么来获得我想要的响应（复选框的值）？

由于

Answer 1

两个问题：

您忘记关闭属性选择器
您忘记了班级选择器中.之前的cont

所以：

$('.list_item').each(function() {
    var x = $('.cont[key="' + $(this).attr('key') + '"]').find('input[type="checkbox"]').prop('checked');
// ------------^--------------------------------------^
    console.log(x);
});

请注意，您可以使用单个选择器而不是find执行此操作：

$('.list_item').each(function() {
    var x = $('.cont[key="' + $(this).attr('key') + '"] input[type="checkbox"]').prop('checked');
    console.log(x);
});

示例：

＆＃13;

$('.list_item').each(function() {
  var x = $('.cont[key="' + $(this).attr('key') + '"] input[type="checkbox"]').prop('checked');
  console.log(x);
});

＆＃13;

<div class='list_item' key='1'>
  <p>Hello, World!</p>
</div>

<div class='cont' key='1'>
  <input type='checkbox' name='test' />
</div>

<div class='list_item' key='2'>
  <p>Hello, World!</p>
</div>

<div class='cont' key='2'>
  <input type='checkbox' name='test' />
</div>

<div class='list_item' key='3'>
  <p>Hello, World!</p>
</div>

<div class='cont' key='3'>
  <input type='checkbox' name='test' checked/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

你错过了＆＃39;。＆＃39;在类选择器之前

$('.list_item').each(function() {
var x = $('.cont[key="' + $(this).attr('key') + '"]').find('input[type="checkbox"]').prop('checked');
console.log(x);
});

Answer 3

我看到你的选择器错了。缺少类点。试试这个：

$('.cont[key="' + $(this).attr('key') + '"')

在动态创建的元素中查找复选框的值

3 个答案: