打破 Jquery 每个循环的问题？答案

【问题标题】：Problem with breaking out Jquery each loop?打破 Jquery 每个循环的问题？
【发布时间】：2011-11-04 07:54:11
【问题描述】：

我有一些像这样的 html 元素：

 <table id="myTable"></table>

    <select name="mySelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>

    <a href="javascript:void(0)" onclick="addToTable()">Add new</a>

    <script>
    addToTable = function() {
      var selected = $("select[name*='mySelect'] option:selected").val();
      $('#myTable').find('tr').each(function() {
        if ($(this).attr('id')==selected) { 
          alert('Record has already existed!'); return false;
        }
        else $('#myTable').append('<tr id="'+selected+'"><td>'+selected+'</td></tr>');
      });
    }
    </script>

问题是：当我添加两个具有相同 id 的记录（行）时，它会提醒消息，但会继续追加新行而不是中断循环。我在这里做错了什么？

提前致谢。

【问题讨论】：

添加相同 ID 的元素是错误的
他说了什么^。您不能在一个页面上多次使用相同的 ID="...." 标记。如果你想做这样的事情，你应该把它放在一个自定义属性中，或者放在类中。
我知道。这就是为什么我需要检查元素 ID。如果 ID 已经存在，则什么也不做。
只检查是否 ($("#" + selected) != undefined) {// 元素已经存在，什么都不做} 那不是更简单吗？

标签： jquery loops break out each

【解决方案1】：

你在做什么：

for every existing row R
  if R.id == newRow.id
    alert
    break
  else
    add newRow

这将为在具有该 ID 的现有行之前的每一行添加 newRow。使用行 [1,2,3,4,5,6,7,8,9] 并添加第 9 行将在警告“已经存在”之前添加该行 8 次。

你的意思是：

exists = false
for every existing row R
  if R.id == newRow.id
    existing = true
    alert
    break

if !exists
  add newRow

JS 中的等价物：

addToTable = function() {
  var selected = $("select[name*='mySelect'] option:selected").val();
  var exists = false;
  $('#myTable').find('tr').each(function() {
    if ($(this).attr('id')==selected) { 
      alert('Record has already existed!');
      exists = true;
      return false;
    }
  });
  if(!exists) {
    $('#favourite_hotels_table').append('<tr id="'+selected+'"><td>'+selected+'</td></tr>');
  }
}

【讨论】：

也许使用 .data() 来存储有关该表内容的信息是一个想法。这有效：jsfiddle.net/9ET3h/1

【解决方案2】：

我不确定，但也许其他方面有问题，如果你这样尝试？

addToTable = function() {
    var selected = $("select[name*='mySelect'] option:selected").val();
    $('#myTable').find('tr').each(function() {
        if ($(this).attr('id') == selected) {
            alert('Record has already existed!');
            return false;
        } else {
          $('#favourite_hotels_table').append('<tr id="' + selected + '"><td>' + selected + '</td></tr>');
        }
    });
}

【讨论】：

那是我的打字错误。 “#myTable”而不是“#favourite_hotels_table”。 :D。我更新了我的问题。

【解决方案3】：

我为这个 http://jsfiddle.net/gj9eN/1/ 创建了一个小提琴，但你的代码似乎不正确。

当表中没有行开始时， tr 上的 .each() 将永远不会执行。请提供更多代码来验证这一点？

这不是更好（更短）吗：

addToTable = function() {
    var selected = $("select[name*='mySelect'] option:selected").val();

    if ($("#" + selected) == undefined) {
        $('#myTable').append('<tr id="'+selected+'"><td>'+selected+'</td></tr>');
    } else {
        alert('Record already exists!');
    }
}

【讨论】：