Question

在这个jQuery示例中：http://jqueryui.com/demos/sortable/#empty-lists，它们为每个可排序的ul（sortable1,2和3）都有CSS标记，如下所示：

CSS

#sortable1 li, #sortable2 li, #sortable3 li { 
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

HTML

<div class="demo">

<ul id="sortable1" class='droptrue'>
    (...)
</ul>

<ul id="sortable2" class='dropfalse'>
    (...)
</ul>

<ul id="sortable3" class='droptrue'>
</ul>

我遇到的问题是，在我的网页上，我不知道提前有多少ul。在没有定义#sortable的每次迭代的情况下处理这个问题的最佳方法是什么？

Answer 1

实际上，您不需要为CSS使用单独的ID，而是可以使用单个类：

CSS

.sortable li { 
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

HTML

<div class="demo">

<ul id="sortable1" class='sortable droptrue'>
    (...)
</ul>

<ul id="sortable2" class='sortable dropfalse'>
    (...)
</ul>

<ul id="sortable3" class='sortable droptrue'>
</ul>

droptrue和dropfalse类仍然可以按预期工作。

Answer 2

人们似乎忘记了简单的CSS3方法：

ul[id^=sortable] li {
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

我们在这里使用Attribute Starts With选择器。因此，这会将样式应用于其li属性以术语ul开头的任何id内的任何sortable元素。

Example

Answer 3

@AndrewBarber的回答是处理事情的更好方法，但是为了记录，你可以动态地创建CSS。

你需要做的是使用某种服务器端语言（PHP是最流行的，无论价值多少;还使用ASP.NET，JSP等）来动态生成CSS。

例如，您可以使用此HTML：

<link rel="stylesheet" type="text/css" href="stylesheet.php">

然后将其设为stylesheet.php：

<?php
    header('Content-Type: text/css');
    for ( $i = 1; $i < $sortableMax; ++$i )
    {
        echo <<<EOT
#sortable$i
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
EOT;
    }
?>

这会生成以下CSS，假设$sortableMax以某种方式设置为5：

#sortable1
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
#sortable2
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
#sortable3
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
#sortable4
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

如何动态创建CSS样式？

3 个答案: