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>

我正在使用的方法是首先创建并填充表，然后隐藏无序列表。我遇到的问题是使用第n个：子选择器。我在控制台上收到错误消息“语法错误，无法识别的表达式：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;

Jquery的第n个子选择器出现语法错误

3 个答案: