javascript - Jquery 的第 n 个子选择器的语法错误

Question

我正在尝试使用 jquery 将一系列 HTML 无序列表更改为表。

这是 HTML 的样子：

<div class="FindByCategory">
    <ul>
         <li>list item</li>
         <li>list item</li>
    </ul>
    <ul>
         <li>list item</li>
    </ul>
    <ul>
         <li>list item</li>
         <li>list item</li>
    </ul>
</div>

我想把它变成这样的东西：

<div class="FindByCategory">
    <table>
        <tr>
            <td>list item</td>
            <td>list item</td>
        </tr>
        <tr>
             <td>list item</td>
             <td>list item</td>
        </tr>
        <tr>
            <td>list item</td>
            <td>list item</td>
        </tr>
</div>

我使用的方法是先创建和填充表格，然后隐藏无序列表。我遇到的问题是 nth:child 选择器。我在控制台上收到错误消息“语法错误，无法识别的表达式：ul:nth-child”。该页面使用 jQuery 1.6.4

这是我的代码：

$('.FindByCategory').prepend('<table />'); 
var numberOfRows = $('.FindByCategory ul').length;
for(var i=0; i <= numberOfRows ; i++ ){
    $('.FindByCategory table').append('<tr>');
    var numberOfColumns = $('.FindByCategory ul:nth-child(i) li').length;
    for(var j = 0; j<= numberOfRows ; j++){
        var liHTMLContents = $('.FindByCategory ul:nth-child(i+1) li:nth-child(j+1)').text();
        $('.FindByCategory table tr:nth-child(i+1)').append('<td>' + liHTMLContents + '</td>');
        }
    }

Answer 1

您可能想使用 的值i，而不是字符串"i"：

var numberOfColumns = $('.FindByCategory ul:nth-child('+i+') li').length;

Answer 2

你需要这样的东西

 $('.FindByCategory ul:nth-child('+i+') li').length;

其他线路也一样。

for(var j = 0; j<= numberOfRows ; j++){
   var liHTMLContents = $('.FindByCategory ul:nth-child('+(i+1)+') li:nth-child('+(j+1)+')').text();
   $('.FindByCategory table tr:nth-child('+(i+1)+')').append('<td>' + liHTMLContents + '</td>');
}

Answer 3

以下

$('.FindByCategory ul:nth-child(i) li').length;

应该

$('.FindByCategory ul:nth-child(' + i + ') li').length;