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

Syntax error with Jquery's nth-child selector

本文关键字：选择器 语法 错误 的第 Jquery      更新时间：2023-09-26

我正在尝试使用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>

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

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

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

以下

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

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

你需要这样的东西

 $('.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>');
}
相关文章：