jquery .each 在另一个 .each 调用中 - 如何答案

【问题标题】：jquery .each within another .each call - How tojquery .each 在另一个 .each 调用中 - 如何
【发布时间】：2012-03-06 01:39:17
【问题描述】：

我有一个这样的 html 结构 [列表中的列表]：

<ul class="outer" >
  <li><input type="text" class="outer_name" value="outer_name"></li>
  <ol class="inner">
    <li><input type="text" value="inner1"><input type="checkbox"></li>
    <li><input type="text" value="inner2"><input type="checkbox"></li>
    <li><input type="text" value="inner3"><input type="checkbox"></li>
  </ol>
</ul>

我在页面上转储了多个此类。我试图为每个“外部”元素指定，我想 alert() 如下：

"outer_name" + "inner1:checked" + "inner2:unchecked" + "inner3:checked"

我一直在玩嵌入式 .each 函数，但我似乎无法确定它。

任何帮助表示赞赏....

【问题讨论】：

标签： jquery html-lists each

【解决方案1】：

您的 HTML 无效。 ul 元素不能直接包含 ol 元素。 only valid child elements of ul 是 li 元素。

如果你修复它：

<ul class="outer" >
  <li><input type="text" class="outer_name" value="outer_name">
    <ol class="inner">
      <li><input type="text" value="inner1"><input type="checkbox"></li>
      <li><input type="text" value="inner2"><input type="checkbox"></li>
      <li><input type="text" value="inner3"><input type="checkbox"></li>
    </ol>
  </li>
</ul>

...然后基本上：

$(".outer > li").each(function() {
    $(this).find(".inner > li").each(function() {
    });
});

【讨论】：

您不应该使用$(".outer>li") 来确保只选择直接子级吗？否则，您也会选择内部 <li>s。
谢谢！在没有无效性的情况下指定它的更好方法是什么；）
@Rocket：相当！谢谢，已修复。
@DJDonaL3000：您必须将ol 放在li 中。

【解决方案2】：

我对此进行了测试，它可以工作：

var items = $(".outer .inner li");
var output = "outer_name - ";
for (var i = 0; i < items.length; i++) {
  var elem = $("input[type=checkbox]", items[i]);
  if( $(elem).is(":checked") ) output += "" + $(elem).prev().val() + ":checked + ";
  else output += "" + $(elem).prev().val() + ":unchecked + ";
}

alert( output );

【讨论】：

【解决方案3】：

这里有一些东西可以给你一个好的开始，并帮助你了解如何在另一个中使用$.each 编辑：小提琴链接不正确演示：http://jsfiddle.net/fMcSz/2/

$('.outer').each(function() {
    var alertMsg = [$(this).find('.outer_name').val()];
    $(this).find('input:checkbox').each(function() {
        var checkText = ' ' + $(this).prev().val() + ': ';
        checkText += (this.checked) ? 'checked' : 'unchecked';
        alertMsg .push( checkText);

    });
    alert(alertMsg.join(',  '))
});

【讨论】：