0

在这个 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 的每次迭代的情况下处理这个问题的最佳方法是什么？

4

3 回答 3

3

您实际上不需要为 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仍将按预期工作。

于 2012-08-09T04:33:10.910 回答
2

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

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

我们在这里使用 Attribute Starts With 选择器。因此，这会将样式应用于 any中属性以 term 开头的任何li元素。ulidsortable

例子。

于 2012-08-09T04:56:02.117 回答
1

@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;
}
于 2012-08-09T04:46:47.550 回答