我在我的网站上使用 jQuery UI datepicker，并希望根据它所在的页面对其进行稍微不同的样式设置。 但是，我遇到了一个小问题，因为包含日历的 div 没有嵌套到应用 .datepicker() 函数的元素中。所以我不能在每页上设置不同的样式。例如。
<body>
<div id="wrapper">...</div>
<div id="datepicker">...</div>
</body>
我知道一种解决方案是根据页面标识正文，但我真的不想这样做，因为我正在使用 CMS，并且目前它向包装器 div 添加类以确定哪个页面。但是，由于 datepicker div 出现在包装器之外，我无法正确设置样式。
是一种配置 datepicker 以在特定 div 中创建日历 div 的方法，还是我必须对 body 进行标识？
谢谢
【问题讨论】：
标签： javascript jquery html css
您可以使用 jquery 向 #datepicker 添加一个类。
$("#wrapper.pageClass").nextAll("#datepicker").addClass("someClass");
编辑：
或者您可以使用 jquery 将 #datepicker 与 div 一起包装。如果#wrapper 只定义了一个类，以下可能会起作用。
var pageClass = $("#wrapper").attr("class");
$("#datepicker").wrap("<div class='" + pageClass + "' />"
【讨论】：
如果我没看错，而且这已经是漫长的一天，您有一个非常简单的选项可用，但它确实需要一些额外的标记。给 body 一个 id（每个页面的 id 不同）：
body#pageOne #datepicker {/* css for pageOne */}
body#pageTwo #datepicker {/* css for pageTwo */}
如果没有别的，你可以提供一些额外的语义信息；虽然它可能不像你想的那么容易。
或者，如 cmets 中所述（感谢 @Bryan Downing），如果您不想将 id 添加到 body，您可以使用 jQuery 来实现类似的效果，但这取决于您的 CMS 的应用方式向#wrapper 上课。但是像这样：
$(document).ready(
function() {
var pageClass = $('#wrapper').attr('class');
$('#datepicker').addClass(pageClass);
}
);
然后，希望这应该允许您像这样定位 CSS：
#datepicker.pageOneClassName {/* css */}
#datepicker.pageTwoClassName {/* css */}
但这显然依赖于 CMS 应用的连贯、可预测/已知的命名策略。虽然因为这与Bryan's answer 如此接近，但我赞成他的。虽然我将把它留在原处，因为它提供的解决方案略有不同。
【讨论】：