如何 select 使用 jQuery select 或 div 中的任何一个并访问其参数

Question

我有以下 HTML 代码，它使用 knockout.js 来填充 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>

此代码与 ko.js 一起创建 div 在 chrome 的检查模式下看起来像这样::

<div class="slider" data-bind="attr: { day: day}" day = mon>
.
.
.
<div class="slider" data-bind="attr: { day: day}" day = sun>

这是ko.js函数：

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;

我想 select 使用 jQuery select 中的任何一个 div 或者访问它的参数，

我是这样做的：

var sx = $(".slider[day=" + today + "]")[0].offsetLeft;

但是这会产生错误：

thermostat.js:105 Uncaught TypeError: Cannot read property 'offsetLeft' of undefined

at ThermostatViewModel.self.updateclock (thermostat.js:105)
at ThermostatViewModel.self.start (thermostat.js:90)
at thermostat.js:166

如何正确使用 jQuery select 或 select 每个生成的 div 的属性？

Answer 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/inline 样式和默认 css 或 style 绑定使其工作。

此外，就像评论中提到的其他人一样，div 元素在技术上不应该放在 span 元素内部。内联元素不应包含块级元素。

如何 select 使用 jQuery select 或 div 中的任何一个并访问其参数

How to select any of that div with jQuery selector and access its parameters

jquery

knockout.js

更新答案

旧答案