Question

我有一个带有复选框的列表项，它们是从后端的东西动态加载的。

这是我在浏览器视图中使用的HTML构造函数。

<ul>
    <li><input type="checkbox" /><label>Details 1</label></li>
    <li><input type="checkbox" /><label>Details 2</label></li>
    <li><input type="checkbox" /><label>Details 3</label></li>
    <li><input type="checkbox" /><label>Details 4</label></li>
    .... and so on
</ul>

根据动态控制，可以在任何时间点更改列表数。

问题是，我想逐渐为复选框添加'ID'，并且必须为各个标签容器添加'for'属性。不用说，必须为相应的标签属性应用相同的id名称。

我如何通过jQuery实现这一目标。

提前致谢。

Answer 1

工作FIDDLE

使用

在jquery中

var countValueYouSet=1;
    $("ul li ").each(function(){
        $('input').attr('id',countValueYouSet);
        $('label').prop('for',countValueYouSet);

        countValueYouSet++;
    });

Answer 2

var listItems = $('ul li');
listItems.each(function(idx, li) {
    $(this).find('input').attr('id','chkbox'+idx);
    $(this).find('label').attr('for','chkbox'+idx);
});

我使用了来自jquery的each，无论在那里可以使用任何数量的列表项，都要检查它。

[1]：

var listItems = $("ul li");
listItems.each(function(idx, li) {
    $(this).find('input').attr('id','chkbox'+idx);
    $(this).find('label').attr('for','chkbox'+idx);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><input type="checkbox" /><label>Details 1</label></li>
    <li><input type="checkbox" /><label>Details 2</label></li>
    <li><input type="checkbox" /><label>Details 3</label></li>
    <li><input type="checkbox" /><label>Details 4</label></li>
</ul>

Answer 3

尝试以下方法。

查找input元素后面没有for属性的所有标签，然后创建一个ID并将其分配给for属性和{{1}前一个元素（ id ）。

input

＆＃13;

$('input + label:not([for])').each(function(index, item){
   var id = 'checkbox-' + index,
       label = $(this);
   label.prop('for', id )
        .prev().prop('id', id);
});

＆＃13;

$('input + label:not([for])').each(function(index, item){
  
  var id = 'checkbox-' + index,
      label = $(this);
  
  label.prop('for', id )
       .prev().prop('id', id);
  
});

＆＃13;

Answer 4

有两个明显的选项，第一个是添加id和for：

＆＃13;

$('input').prop('id', function(i) {
  var id = 'input' + i;
  $(this).next('label').attr('for', id);
  return id;
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" />
    <label>Details 1</label>
  </li>
  <li>
    <input type="checkbox" />
    <label>Details 2</label>
  </li>
  <li>
    <input type="checkbox" />
    <label>Details 3</label>
  </li>
  <li>
    <input type="checkbox" />
    <label>Details 4</label>
  </li>
</ul>

＆＃13;

第二种是简单地移动input内的label：

＆＃13;

$('input').each(function() {
  $(this).prependTo(this.nextElementSibling);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" />
    <label>Details 1</label>
  </li>
  <li>
    <input type="checkbox" />
    <label>Details 2</label>
  </li>
  <li>
    <input type="checkbox" />
    <label>Details 3</label>
  </li>
  <li>
    <input type="checkbox" />
    <label>Details 4</label>
  </li>
</ul>

＆＃13;

参考文献：

JavaScript的：
- node.nextElementSibling。
jQuery的：
- attr()。
- next()。
- prependTo()。
- prop()。

Jquery - 如何为各个标签添加动态ID和文本

4 个答案: