Проблема с прерыванием Jquery каждого цикла?

Question

У меня есть некоторый 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>

Проблема заключалась в том, что, когда я добавлял две записи (строки) с одинаковым идентификатором, он предупреждал об этом сообщении, но продолжал добавлять новую строку вместо прерыванияиз цикла.Что я тут не так?

Заранее спасибо.

Answer 1

Что вы делаете:

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

Это добавит 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>');
  }
}

Answer 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>');
        }
    });
}

Answer 3

Я создал скрипку для этого http://jsfiddle.net/gj9eN/1/,, но ваш код кажется неверным.

Если в таблице нет строк для начала, .each () на tr никогда не будет выполняться.Пожалуйста, предоставьте больше кода, чтобы проверить это?

Разве это не работает лучше (и короче):

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!');
    }
}