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

时间:2013-04-16 20:35:21

标签: javascript jquery jquery-selectors

我正在尝试使用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>');
        }
    }

3 个答案:

答案 0 :(得分:2)

您可能希望使用i的值,而不是字符串"i"

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

答案 1 :(得分:0)

你需要这样的东西

 $('.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>');
}

答案 2 :(得分:0)

以下

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

应该是

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