Блог

Следующий код — это просто демонстрация теории, которую я хочу применить к своему приложению, поэтому использование THIS вместо td.flex не подходит для второй строки в функции.

Также я ДОЛЖЕН использовать .index вместо n-го дочернего элемента по другим причинам.

Это все сказанное 🙂

Следующая функция перебирает все TD в первой строке таблицы, которые имеют класс flex. Для каждого из них запишите значение индекса. Следующая строка не является частью реального приложения, но для проверки теории необходимо найти все td с классом flex, значение индекса которых соответствует значению cellIndex. Есть идеи, как заставить это работать?

Помните, что этот код предназначен для проверки теории, поэтому я не использую nth-child или this для применения раскраски css!

 cellIndex = new Array();

    $('table tr:first-child td.flex').each(function (i) {

        cellIndex[i] = $(this).index();

        $($('td.flex').index(cellIndex)).css('background-color', '#ff0000');

    });
 

если я сделаю: console.log($('td.flex').index(cellIndex));

Я получаю -1 для каждого цикла

Просто чтобы подтвердить, что я знаю, что могу это сделать:

 $(this).css('background-color', '#ff0000');
 

но это НЕ то, чего я пытаюсь достичь с помощью этой функции, и это НЕ будет работать в реальном приложении.

Пример HTML:

 <table>
<tr>
<td class="flex">Flex</td>
<td>Not Flex</td>
<td class="flex">Flex</td>
<td>Not Flex</td>
<td>Not Flex</td>
</tr>
</table>
 

каждая функция уже включает систему индексов. Таким образом, вы можете использовать его следующим образом (cellIndex устарел): http://jsfiddle.net/TMFg3 /

 cellIndex = new Array();

$('table tr:first-child td.flex').each(function (i) {

    cellIndex[i] = i;

   $('td.flex:eq(' i ')').css('background-color', '#ff0000');

});
 

Если вы не хотите использовать cellIndex, то вам придется зацикливать его вне каждой функции, поскольку вы не можете отправить массив в индексный идентификатор, плюс это изменило бы одни и те же цели в каждом цикле 🙂

Вы, конечно, также можете использовать индекс в cellIndex следующим образом:

 cellIndex = new Array();

$('table tr:first-child td.flex').each(function (i) {

    cellIndex[i] = i;

   $('td.flex:eq(' cellIndex[i] ')').css('background-color', '#ff0000');

});
 

Если вы просто хотите пройтись по списку, вы могли бы сделать:

 $('table tr td:first-child td.flex').each(function (i) {        
    var cellIndex =$('table tr:first-child td').index(this);
    $('#hello').text($('#hello').text() '"' cellIndex '",');
    $('td').eq(cellIndex).css('background-color', '#ff0000');    
}); 
 

Предполагается, что элемент, идентифицированный с помощью #hello, существует — тогда он будет содержать «0», «2», показывающие индексы, а элементы будут иметь красный фон.

Чтобы поместить это в массив:

 $(document).ready(function(){
  var myCellIndexes=[];
  $('table tr td').parent().find('.flex').css('background-color','green');
  $('table tr:first-child td.flex').each(function (i) {        
    var cellIndex =$('table tr:first-child td').index(this);
    myCellIndexes[i]=cellIndex;
    $('#hello').text($('#hello').text() '"' cellIndex '",');
    $('td').eq(cellIndex).css('background-color', '#ff0000');  
   }); 
   $('#hello').text($('#hello').text() myCellIndexes);
});
 

в результате было бы: «0»,»2″,0,2 в приветствии в конце демонстрируется, что массив теперь содержит индексы элементов. Это должно дать вам рабочее представление о том, что вы хотите сделать, чтобы ваша реальная работа была выполнена 🙂