如何使用 jQuery 选择器选择任何 div 并访问其参数答案

<span data-bind="foreach: $root.days"> <div class="slider" data-bind="attr: { day: day}"> <span data-bind="foreach: $root.segment"> <div class='slider-segment' data-bind= "style: {left: left, width: width, backgroundColor: color}"></div> <div class='slider-button' data-bind= "style: {left: left}"></div> </span> <div class='slider-label' data-bind="text: day"></div> </div> </span>

self.updateclock = function() { now = (new Date()); timenow = now.getHours() + (now.getMinutes() / 60); today = days[now.getDay()]; self.datetime(today.toUpperCase() + " " + format_time(timenow)); console.log(today.toUpperCase() + " " + format_time(timenow)); var current_key = 0; var sx = $(".slider[day=" + today + "]")[0].offsetLeft; console.log(sx); var y = $(".slider[day=" + today + "]")[0].offsetTop; console.log(y); var x1 = sx + slider_width * (timenow / 24.0); console.log(x1); var x2 = sx + slider_width * (schedule[today][current_key].start / 24.0); console.log(x2); var w = x1-x2;

【解决方案1】：

更新答案

（根据评论更新答案）

如果您只想在特定日期渲染元素，我会在视图模型上创建一个函数：

function isToday(day) {
    var allDays = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
    var now = new Date(),
        timeNow = now.getHours() + (now.getMinutes() / 60),
        today = allDays[now.getDay()];

    return day === today;
}

然后您所要做的就是使用此函数显示相应日期的时间标记 div（使用visible 绑定）。

<span data-bind="foreach: $root.days">
    <div class="slider">
        <span data-bind="foreach: $root.segment">
            <div class='slider-segment' data-bind= "style: {left: left, width: width, backgroundColor: color}"></div>
            <div class='slider-button' data-bind= "style: {left: left}"></div>
        </span>
        <div class='slider-label' data-bind="text: day"></div>
        <div id="timemarker" data-bind="style: {top: top, left: left, width: width}, visible: $parent.isToday(day)"></div>
    </div>
</span>

旧答案

自定义绑定处理程序可以解决问题：

ko.bindingHandlers.shadow = {
    update: function (element, valueAccessor) {
        var curDay = valueAccessor();
        var allDays = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
        var now = new Date(),
            timeNow = now.getHours() + (now.getMinutes() / 60),
            today = allDays[now.getDay()];

    if (curDay === today) {
        // this is today's div! Now you can do whatever with 'element'
    }
};

这样申请：

<span data-bind="foreach: $root.days">
    <div class="slider" data-bind="shadow: day">
        <span data-bind="foreach: $root.segment">
            <div class='slider-segment' data-bind= "style: {left: left, width: width, backgroundColor: color}"></div>
            <div class='slider-button' data-bind= "style: {left: left}"></div>
        </span>
        <div class='slider-label' data-bind="text: day"></div>
    </div>
</span>

根据您创建阴影的方式，您甚至可能不需要自定义绑定处理程序，但可以使用 CSS/内联样式和默认的 css 或 style 绑定使其工作。

另外，就像 cmets 中提到的其他人一样，div 元素在技术上不应进入 span 元素内部。内联元素不应包含块级元素。

【讨论】：

感谢您提供如此详细的答案。那我可以用 div 代替 span 吗？还。我像这样渲染阴影（在 html 的 div 生成部分之外）：
是那么使用自定义绑定是否可行？
在这种情况下，您实际上并不需要自定义绑定处理程序。请参阅我的更新答案以获取可能的解决方案。是的，你当然可以使用 div 而不是 span。