Функция jQuery .each в разных браузерах (работает в ff, ie8, а не в ie7)

Question

Я слишком долго возился с этим, и мне удалось заставить IE8 работать, но IE7 поставил меня в тупик.

У меня есть таблица, и для каждого столбца я пытаюсь извлечь несколько элементов div. Я только извлекаю div, которые соответствуют определенным селекторам, а не всем div в столбце. Мой оригинальный селектор jquery был

jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});

Это отлично работало в FF, но не вызывало функцию .each в IE.

Немного покопавшись, я добрался до

jQuery('td:nth-child('+columnNum+') > div.a1, td:nth-child('+columnNum+') > div.a3, td:nth-child('+columnNum+') > div.a4,td:nth-child('+columnNum+') >  div.a7', table#a+'tableId).each(function(){
alert(jQuery(this.attr('id'));
});

Не очень красиво, но работает в IE8. Я пробовал все виды комбинаций, используя .eq (+ 'columnNum +'), но больше ничего не работало.

Теперь я иду и тестирую в IE7, и снова .each не запускается.

Каков наилучший способ (и совместимость с разными браузерами) для работы с такого рода элементом .each?

-------------- дополнение --------------

После дальнейшего тестирования и игры с советами от DrJ и bdukes я обнаружил, что таблица # '+ tableId нарушает функцию в IE7 и 8.

Я вернулся к своему исходному коду

jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});

поскольку это кажется мне наиболее эффективным. Если я удаляю «table # a» + tableId, я получаю правильный ответ во всех браузерах, за исключением того, что он складывает результаты из всех таблиц, и мне нужно иметь возможность получать только результаты из одной таблицы за раз. Я также пробовал 'table # a' + tableId + '> td: nth-child (' + columnNum + ')'). Каждый, но это тоже не работает.

Первая функция, которую я использовал, отлично работает в Firefox.

---------------- выбираемый html --------------------------- Таблицы создаются динамически в javascript, поэтому я не могу их скопировать и пропустить, но вот как выглядит вывод. В конечном итоге это выглядит как диаграмма Ганта на столе.

<table id="a1">
 <tr>
  <th colspan="5">
        Group Name
   </th>
   </tr>
  <tr class="rowId1" >
  <td>
   <div class="a1" id="a43" style="margin-left:13px; width:60px" ></div>
   </td>
  <td>
  </td>
   <td>
    <div class="a3" id="a93" style="margin-left:4px; width: 80px" ></div>
   <div class="a2" id="a94" style="margin-left:4px; width: 30px" ></div>
  </td>
 <td>
    <div class="a1" id="a24" style="margin-left: 15px; width: 65px;" ></div>
  </td>
 <td>
  </td>
 </tr>
 </tr>
  <tr class="rowId1" >
  <td>
   <div class="a7" id="a24" style="margin-left:10px; width:60px" ></div>
   </td>
  <td>
 <div class="a2" id="a15" style="margin-left:14px; width: 22px" ></div&gt
  </td>
   <td>
   ;
   <div class="a2" id="a105" style="margin-left: 8px; width: 50px" ></div>
  </td>
 <td>
  </td>
 <td>
<div class="a4" id="a102" style="margin-left: 5px; width: 45px;" ></div>
  </td>
 </tr>
  </table>

Answer 1

Оказывается, это была проблема с ошибкой IE, когда два разных элемента имеют одинаковый идентификатор. По-видимому, это нарушает функцию .each.

У меня было две таблицы table.notes # a1 & table.inputs # a1

Функция .each должна была пройти через каждую таблицу, но вместо этого не найти ни одну.

jQuery также не запускается, т.е. с

jQuery('div.a1, div.a3, div.a4, div.a7','table.inputs#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});

, что он должен был сделать, так как я указываю прямо на конкретную таблицу, даже если идентификатор не уникален.

Я использую идентификаторы, извлеченные из базы данных для идентификатора, и IE не нравится идентификаторы, начинающиеся с цифр, поэтому я просто добавил 'a' в начало идентификатора. Однако, по-видимому, это тоже не нравится, так что теперь я добавляю первую букву класса, а затем «1» или любой другой номер идентификатора.

Это решает проблему.