n-child选择每个60-80个孩子

Question

我有一张＆＃34;表＆＃34;每个工作日有10个节点的flex元素;我必须根据验证选择它们：valid_weekdays，valid_slots;

例如，valid_weekdays = [6,7] / valid_slots = [1,2,3,4,5,6]，应该只选择星期六 - 星期日，1到6个插槽;然而，脚本选择.. idk，几乎随机...

$.each(valid_weekdays, function(i, v) {
  $.each(valid_slots, function(ii, vv) {
    $('.timenode:nth-child('+((v-1)*10)+'n+'+(vv)+')').not('.occupied').addClass('available');
  });
});

https://jsfiddle.net/czzbb08o/3/

Answer 1

如果您可以控制数据输出的变化那么。布局似乎过于简单，使代码过于复杂。

添加说data-dow并使用现有的data-timenode会使代码变得微不足道使用过滤器。

e.g。

<div class="timenode column occupied fixed" data-dow="1" data-date="2016-12-26" data-timenode="1">1</div>

然后代码可以是一个简单的过滤器，用于检查索引是否在数组中：

var valid_weekdays = [2, 6, 7]; // Added 2 to show overlap
var valid_slots = [1, 2, 3, 4, 5];
$('.timenode').not('.occupied').filter(function(i){
    var $node = $(this);
    return ($.inArray($node.data('dow'), valid_weekdays) > -1 && $.inArray($node.data('timenode'), valid_slots) > -1);
}).addClass('available');

JSFiddle： https://jsfiddle.net/TrueBlueAussie/czzbb08o/5/

这对于小型阵列来说非常快，但显然有一些开销。如果您需要超高速，请使用DOW和TIMENODE值的类并生成类选择器（例如，使用map和join）。

e.g。

HTML

<div class="timenode column occupied fixed DOW1 TIME1" data-date="2016-12-26">1</div>

代码：

var valid_weekdays = [2, 6, 7];
var valid_slots = [1, 2, 3, 4, 5];

var weekdays = $.map(valid_weekdays, function(val){
    return ".DOW" + val;
}).join(',');
var times = $.map(valid_slots, function(val){
    return ".TIME" + val;
}).join(',');
$('.timenode').not('.occupied').filter(weekdays).filter(times).addClass('available');

JSFiddle： https://jsfiddle.net/TrueBlueAussie/vh5Ln79p/3/

Answer 2

这就是诀窍：

$.each(valid_weekdays, function(i,day) {
  $.each(valid_slots, function(j,slot) {
    $('.timenode:nth-child(70n+'+((day*10)-10+slot)+')').not('.occupied').addClass('available');
  });
});

• 70n 7天，10个插槽
• (day*10)每天10个广告位
• -10用于在HTML表格中从01开始计数
• +slot插槽

＆＃13;

＆＃13;

var valid_weekdays = [6, 7];
var valid_slots = [1, 2, 3, 4, 5];
$.each(valid_weekdays, function(i,day) {
  $.each(valid_slots, function(j,slot) {
    $('.timenode:nth-child(70n+'+((day*10)-10+slot)+')').not('.occupied').addClass('available');
  });
});

＆＃13;

.ui.grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding: 0;
}

.ui[class*="ten column"].grid>.column:not(.row),
.ui[class*="ten column"].grid>.row>.column {
  width: 10%;
}

.available {background:green;}

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div id="timeline" class="ui ten column grid ui-droppable">
  <div class="timenode column occupied fixed" data-date="2016-12-26" data-timenode="1">1</div>
  <div class="timenode column occupied fixed" data-date="2016-12-26" data-timenode="2">2</div>
  <div class="timenode column occupied fixed" data-date="2016-12-26" data-timenode="3">3</div>
  <div class="timenode column occupied fixed" data-date="2016-12-26" data-timenode="4">4</div>
  <div class="timenode column" data-date="2016-12-26" data-timenode="5">5</div>
  <div class="timenode column" data-date="2016-12-26" data-timenode="6">6</div>
  <div class="timenode column" data-date="2016-12-26" data-timenode="7">7</div>
  <div class="timenode column" data-date="2016-12-26" data-timenode="8">8</div>
  <div class="timenode column" data-date="2016-12-26" data-timenode="9">9</div>
  <div class="timenode column" data-date="2016-12-26" data-timenode="10">10</div>
  <div class="timenode column occupied fixed" data-date="2016-12-27" data-timenode="1">11</div>
  <div class="timenode column occupied fixed" data-date="2016-12-27" data-timenode="2">12</div>
  <div class="timenode column occupied fixed" data-date="2016-12-27" data-timenode="3">13</div>
  <div class="timenode column occupied fixed" data-date="2016-12-27" data-timenode="4">14</div>
  <div class="timenode column" data-date="2016-12-27" data-timenode="5">15</div>
  <div class="timenode column" data-date="2016-12-27" data-timenode="6">16</div>
  <div class="timenode column" data-date="2016-12-27" data-timenode="7">17</div>
  <div class="timenode column" data-date="2016-12-27" data-timenode="8">18</div>
  <div class="timenode column" data-date="2016-12-27" data-timenode="9">19</div>
  <div class="timenode column" data-date="2016-12-27" data-timenode="10">20</div>
  <div class="timenode column" data-date="2016-12-28" data-timenode="1">21</div>
  <div class="timenode column" data-date="2016-12-28" data-timenode="2">22</div>
  <div class="timenode column" data-date="2016-12-28" data-timenode="3">23</div>
  <div class="timenode column" data-date="2016-12-28" data-timenode="4">24</div>
  <div class="timenode column" data-date="2016-12-28" data-timenode="5">25</div>
  <div class="timenode column" data-date="2016-12-28" data-timenode="6">26</div>
  <div class="timenode column" data-date="2016-12-28" data-timenode="7">27</div>
  <div class="timenode column" data-date="2016-12-28" data-timenode="8">28</div>
  <div class="timenode column" data-date="2016-12-28" data-timenode="9">29</div>
  <div class="timenode column" data-date="2016-12-28" data-timenode="10">30</div>
  <div class="timenode column" data-date="2016-12-29" data-timenode="1">31</div>
  <div class="timenode column" data-date="2016-12-29" data-timenode="2">32</div>
  <div class="timenode column" data-date="2016-12-29" data-timenode="3">33</div>
  <div class="timenode column" data-date="2016-12-29" data-timenode="4">34</div>
  <div class="timenode column" data-date="2016-12-29" data-timenode="5">35</div>
  <div class="timenode column" data-date="2016-12-29" data-timenode="6">36</div>
  <div class="timenode column" data-date="2016-12-29" data-timenode="7">37</div>
  <div class="timenode column occupied fixed" data-date="2016-12-29" data-timenode="8">38</div>
  <div class="timenode column occupied fixed" data-date="2016-12-29" data-timenode="9">39</div>
  <div class="timenode column occupied fixed" data-date="2016-12-29" data-timenode="10">40</div>
  <div class="timenode column" data-date="2016-12-30" data-timenode="1">41</div>
  <div class="timenode column" data-date="2016-12-30" data-timenode="2">42</div>
  <div class="timenode column" data-date="2016-12-30" data-timenode="3">43</div>
  <div class="timenode column" data-date="2016-12-30" data-timenode="4">44</div>
  <div class="timenode column" data-date="2016-12-30" data-timenode="5">45</div>
  <div class="timenode column" data-date="2016-12-30" data-timenode="6">46</div>
  <div class="timenode column" data-date="2016-12-30" data-timenode="7">47</div>
  <div class="timenode column" data-date="2016-12-30" data-timenode="8">48</div>
  <div class="timenode column" data-date="2016-12-30" data-timenode="9">49</div>
  <div class="timenode column" data-date="2016-12-30" data-timenode="10">50</div>
  <div class="timenode column" data-date="2016-12-31" data-timenode="1">51</div>
  <div class="timenode column" data-date="2016-12-31" data-timenode="2">52</div>
  <div class="timenode column" data-date="2016-12-31" data-timenode="3">53</div>
  <div class="timenode column" data-date="2016-12-31" data-timenode="4">54</div>
  <div class="timenode column" data-date="2016-12-31" data-timenode="5">55</div>
  <div class="timenode column" data-date="2016-12-31" data-timenode="6">56</div>
  <div class="timenode column" data-date="2016-12-31" data-timenode="7">57</div>
  <div class="timenode column" data-date="2016-12-31" data-timenode="8">58</div>
  <div class="timenode column" data-date="2016-12-31" data-timenode="9">59</div>
  <div class="timenode column" data-date="2016-12-31" data-timenode="10">60</div>
  <div class="timenode column" data-date="2017-01-01" data-timenode="1">61</div>
  <div class="timenode column" data-date="2017-01-01" data-timenode="2">62</div>
  <div class="timenode column" data-date="2017-01-01" data-timenode="3">63</div>
  <div class="timenode column" data-date="2017-01-01" data-timenode="4">64</div>
  <div class="timenode column" data-date="2017-01-01" data-timenode="5">65</div>
  <div class="timenode column" data-date="2017-01-01" data-timenode="6">66</div>
  <div class="timenode column" data-date="2017-01-01" data-timenode="7">67</div>
  <div class="timenode column" data-date="2017-01-01" data-timenode="8">68</div>
  <div class="timenode column" data-date="2017-01-01" data-timenode="9">69</div>
  <div class="timenode column" data-date="2017-01-01" data-timenode="10">70</div>
  <div class="timenode column" data-date="2017-01-02" data-timenode="1">71</div>
  <div class="timenode column" data-date="2017-01-02" data-timenode="2">72</div>
  <div class="timenode column" data-date="2017-01-02" data-timenode="3">73</div>
  <div class="timenode column" data-date="2017-01-02" data-timenode="4">74</div>
  <div class="timenode column" data-date="2017-01-02" data-timenode="5">75</div>
  <div class="timenode column" data-date="2017-01-02" data-timenode="6">76</div>
  <div class="timenode column" data-date="2017-01-02" data-timenode="7">77</div>
  <div class="timenode column" data-date="2017-01-02" data-timenode="8">78</div>
  <div class="timenode column" data-date="2017-01-02" data-timenode="9">79</div>
  <div class="timenode column" data-date="2017-01-02" data-timenode="10">80</div>
  <div class="timenode column" data-date="2017-01-03" data-timenode="1">81</div>
  <div class="timenode column" data-date="2017-01-03" data-timenode="2">82</div>
  <div class="timenode column" data-date="2017-01-03" data-timenode="3">83</div>
  <div class="timenode column" data-date="2017-01-03" data-timenode="4">84</div>
  <div class="timenode column" data-date="2017-01-03" data-timenode="5">85</div>
  <div class="timenode column" data-date="2017-01-03" data-timenode="6">86</div>
  <div class="timenode column" data-date="2017-01-03" data-timenode="7">87</div>
  <div class="timenode column" data-date="2017-01-03" data-timenode="8">88</div>
  <div class="timenode column" data-date="2017-01-03" data-timenode="9">89</div>
  <div class="timenode column" data-date="2017-01-03" data-timenode="10">90</div>
  <div class="timenode column" data-date="2017-01-04" data-timenode="1">91</div>
  <div class="timenode column" data-date="2017-01-04" data-timenode="2">92</div>
  <div class="timenode column" data-date="2017-01-04" data-timenode="3">93</div>
  <div class="timenode column" data-date="2017-01-04" data-timenode="4">94</div>
  <div class="timenode column" data-date="2017-01-04" data-timenode="5">95</div>
  <div class="timenode column" data-date="2017-01-04" data-timenode="6">96</div>
  <div class="timenode column" data-date="2017-01-04" data-timenode="7">97</div>
  <div class="timenode column" data-date="2017-01-04" data-timenode="8">98</div>
  <div class="timenode column" data-date="2017-01-04" data-timenode="9">99</div>
  <div class="timenode column" data-date="2017-01-04" data-timenode="10">100</div>
  <div class="timenode column" data-date="2017-01-05" data-timenode="1">101</div>
  <div class="timenode column" data-date="2017-01-05" data-timenode="2">102</div>
  <div class="timenode column" data-date="2017-01-05" data-timenode="3">103</div>
  <div class="timenode column" data-date="2017-01-05" data-timenode="4">104</div>
  <div class="timenode column" data-date="2017-01-05" data-timenode="5">105</div>
  <div class="timenode column" data-date="2017-01-05" data-timenode="6">106</div>
  <div class="timenode column" data-date="2017-01-05" data-timenode="7">107</div>
  <div class="timenode column" data-date="2017-01-05" data-timenode="8">108</div>
  <div class="timenode column" data-date="2017-01-05" data-timenode="9">109</div>
  <div class="timenode column" data-date="2017-01-05" data-timenode="10">110</div>
  <div class="timenode column" data-date="2017-01-06" data-timenode="1">111</div>
  <div class="timenode column" data-date="2017-01-06" data-timenode="2">112</div>
  <div class="timenode column" data-date="2017-01-06" data-timenode="3">113</div>
  <div class="timenode column" data-date="2017-01-06" data-timenode="4">114</div>
  <div class="timenode column" data-date="2017-01-06" data-timenode="5">115</div>
  <div class="timenode column" data-date="2017-01-06" data-timenode="6">116</div>
  <div class="timenode column" data-date="2017-01-06" data-timenode="7">117</div>
  <div class="timenode column" data-date="2017-01-06" data-timenode="8">118</div>
  <div class="timenode column" data-date="2017-01-06" data-timenode="9">119</div>
  <div class="timenode column" data-date="2017-01-06" data-timenode="10">120</div>
  <div class="timenode column" data-date="2017-01-07" data-timenode="1">121</div>
  <div class="timenode column" data-date="2017-01-07" data-timenode="2">122</div>
  <div class="timenode column" data-date="2017-01-07" data-timenode="3">123</div>
  <div class="timenode column" data-date="2017-01-07" data-timenode="4">124</div>
  <div class="timenode column" data-date="2017-01-07" data-timenode="5">125</div>
  <div class="timenode column" data-date="2017-01-07" data-timenode="6">126</div>
  <div class="timenode column" data-date="2017-01-07" data-timenode="7">127</div>
  <div class="timenode column" data-date="2017-01-07" data-timenode="8">128</div>
  <div class="timenode column" data-date="2017-01-07" data-timenode="9">129</div>
  <div class="timenode column" data-date="2017-01-07" data-timenode="10">130</div>
  <div class="timenode column" data-date="2017-01-08" data-timenode="1">131</div>
  <div class="timenode column" data-date="2017-01-08" data-timenode="2">132</div>
  <div class="timenode column" data-date="2017-01-08" data-timenode="3">133</div>
  <div class="timenode column" data-date="2017-01-08" data-timenode="4">134</div>
  <div class="timenode column" data-date="2017-01-08" data-timenode="5">135</div>
  <div class="timenode column" data-date="2017-01-08" data-timenode="6">136</div>
  <div class="timenode column" data-date="2017-01-08" data-timenode="7">137</div>
  <div class="timenode column" data-date="2017-01-08" data-timenode="8">138</div>
  <div class="timenode column" data-date="2017-01-08" data-timenode="9">139</div>
  <div class="timenode column" data-date="2017-01-08" data-timenode="10">140</div>
  <div class="timenode column" data-date="2017-01-09" data-timenode="1">141</div>
  <div class="timenode column" data-date="2017-01-09" data-timenode="2">142</div>
  <div class="timenode column" data-date="2017-01-09" data-timenode="3">143</div>
  <div class="timenode column" data-date="2017-01-09" data-timenode="4">144</div>
  <div class="timenode column" data-date="2017-01-09" data-timenode="5">145</div>
  <div class="timenode column" data-date="2017-01-09" data-timenode="6">146</div>
  <div class="timenode column" data-date="2017-01-09" data-timenode="7">147</div>
  <div class="timenode column" data-date="2017-01-09" data-timenode="8">148</div>
  <div class="timenode column" data-date="2017-01-09" data-timenode="9">149</div>
  <div class="timenode column" data-date="2017-01-09" data-timenode="10">150</div>
  <div class="timenode column" data-date="2017-01-10" data-timenode="1">151</div>
  <div class="timenode column" data-date="2017-01-10" data-timenode="2">152</div>
  <div class="timenode column" data-date="2017-01-10" data-timenode="3">153</div>
  <div class="timenode column" data-date="2017-01-10" data-timenode="4">154</div>
  <div class="timenode column" data-date="2017-01-10" data-timenode="5">155</div>
  <div class="timenode column" data-date="2017-01-10" data-timenode="6">156</div>
  <div class="timenode column" data-date="2017-01-10" data-timenode="7">157</div>
  <div class="timenode column" data-date="2017-01-10" data-timenode="8">158</div>
  <div class="timenode column" data-date="2017-01-10" data-timenode="9">159</div>
  <div class="timenode column" data-date="2017-01-10" data-timenode="10">160</div>
  <div class="timenode column" data-date="2017-01-11" data-timenode="1">161</div>
  <div class="timenode column" data-date="2017-01-11" data-timenode="2">162</div>
  <div class="timenode column" data-date="2017-01-11" data-timenode="3">163</div>
  <div class="timenode column" data-date="2017-01-11" data-timenode="4">164</div>
  <div class="timenode column" data-date="2017-01-11" data-timenode="5">165</div>
  <div class="timenode column" data-date="2017-01-11" data-timenode="6">166</div>
  <div class="timenode column" data-date="2017-01-11" data-timenode="7">167</div>
  <div class="timenode column" data-date="2017-01-11" data-timenode="8">168</div>
  <div class="timenode column" data-date="2017-01-11" data-timenode="9">169</div>
  <div class="timenode column" data-date="2017-01-11" data-timenode="10">170</div>
  <div class="timenode column" data-date="2017-01-12" data-timenode="1">171</div>
  <div class="timenode column" data-date="2017-01-12" data-timenode="2">172</div>
  <div class="timenode column" data-date="2017-01-12" data-timenode="3">173</div>
  <div class="timenode column" data-date="2017-01-12" data-timenode="4">174</div>
  <div class="timenode column" data-date="2017-01-12" data-timenode="5">175</div>
  <div class="timenode column" data-date="2017-01-12" data-timenode="6">176</div>
  <div class="timenode column" data-date="2017-01-12" data-timenode="7">177</div>
  <div class="timenode column" data-date="2017-01-12" data-timenode="8">178</div>
  <div class="timenode column" data-date="2017-01-12" data-timenode="9">179</div>
  <div class="timenode column" data-date="2017-01-12" data-timenode="10">180</div>
  <div class="timenode column" data-date="2017-01-13" data-timenode="1">181</div>
  <div class="timenode column" data-date="2017-01-13" data-timenode="2">182</div>
  <div class="timenode column" data-date="2017-01-13" data-timenode="3">183</div>
  <div class="timenode column" data-date="2017-01-13" data-timenode="4">184</div>
  <div class="timenode column" data-date="2017-01-13" data-timenode="5">185</div>
  <div class="timenode column" data-date="2017-01-13" data-timenode="6">186</div>
  <div class="timenode column" data-date="2017-01-13" data-timenode="7">187</div>
  <div class="timenode column" data-date="2017-01-13" data-timenode="8">188</div>
  <div class="timenode column" data-date="2017-01-13" data-timenode="9">189</div>
  <div class="timenode column" data-date="2017-01-13" data-timenode="10">190</div>
  <div class="timenode column" data-date="2017-01-14" data-timenode="1">191</div>
  <div class="timenode column" data-date="2017-01-14" data-timenode="2">192</div>
  <div class="timenode column" data-date="2017-01-14" data-timenode="3">193</div>
  <div class="timenode column" data-date="2017-01-14" data-timenode="4">194</div>
  <div class="timenode column" data-date="2017-01-14" data-timenode="5">195</div>
  <div class="timenode column" data-date="2017-01-14" data-timenode="6">196</div>
  <div class="timenode column" data-date="2017-01-14" data-timenode="7">197</div>
  <div class="timenode column" data-date="2017-01-14" data-timenode="8">198</div>
  <div class="timenode column" data-date="2017-01-14" data-timenode="9">199</div>
  <div class="timenode column" data-date="2017-01-14" data-timenode="10">200</div>
  <div class="timenode column" data-date="2017-01-15" data-timenode="1">201</div>
  <div class="timenode column" data-date="2017-01-15" data-timenode="2">202</div>
  <div class="timenode column" data-date="2017-01-15" data-timenode="3">203</div>
  <div class="timenode column" data-date="2017-01-15" data-timenode="4">204</div>
  <div class="timenode column" data-date="2017-01-15" data-timenode="5">205</div>
  <div class="timenode column" data-date="2017-01-15" data-timenode="6">206</div>
  <div class="timenode column" data-date="2017-01-15" data-timenode="7">207</div>
  <div class="timenode column" data-date="2017-01-15" data-timenode="8">208</div>
  <div class="timenode column" data-date="2017-01-15" data-timenode="9">209</div>
  <div class="timenode column" data-date="2017-01-15" data-timenode="10">210</div>
  <div class="timenode column" data-date="2017-01-16" data-timenode="1">211</div>
  <div class="timenode column" data-date="2017-01-16" data-timenode="2">212</div>
  <div class="timenode column" data-date="2017-01-16" data-timenode="3">213</div>
  <div class="timenode column" data-date="2017-01-16" data-timenode="4">214</div>
  <div class="timenode column" data-date="2017-01-16" data-timenode="5">215</div>
  <div class="timenode column" data-date="2017-01-16" data-timenode="6">216</div>
  <div class="timenode column" data-date="2017-01-16" data-timenode="7">217</div>
  <div class="timenode column" data-date="2017-01-16" data-timenode="8">218</div>
  <div class="timenode column" data-date="2017-01-16" data-timenode="9">219</div>
  <div class="timenode column" data-date="2017-01-16" data-timenode="10">220</div>
  <div class="timenode column" data-date="2017-01-17" data-timenode="1">221</div>
  <div class="timenode column" data-date="2017-01-17" data-timenode="2">222</div>
  <div class="timenode column" data-date="2017-01-17" data-timenode="3">223</div>
  <div class="timenode column" data-date="2017-01-17" data-timenode="4">224</div>
  <div class="timenode column" data-date="2017-01-17" data-timenode="5">225</div>
  <div class="timenode column" data-date="2017-01-17" data-timenode="6">226</div>
  <div class="timenode column" data-date="2017-01-17" data-timenode="7">227</div>
  <div class="timenode column" data-date="2017-01-17" data-timenode="8">228</div>
  <div class="timenode column" data-date="2017-01-17" data-timenode="9">229</div>
  <div class="timenode column" data-date="2017-01-17" data-timenode="10">230</div>
  <div class="timenode column" data-date="2017-01-18" data-timenode="1">231</div>
  <div class="timenode column" data-date="2017-01-18" data-timenode="2">232</div>
  <div class="timenode column" data-date="2017-01-18" data-timenode="3">233</div>
  <div class="timenode column" data-date="2017-01-18" data-timenode="4">234</div>
  <div class="timenode column" data-date="2017-01-18" data-timenode="5">235</div>
  <div class="timenode column" data-date="2017-01-18" data-timenode="6">236</div>
  <div class="timenode column" data-date="2017-01-18" data-timenode="7">237</div>
  <div class="timenode column" data-date="2017-01-18" data-timenode="8">238</div>
  <div class="timenode column" data-date="2017-01-18" data-timenode="9">239</div>
  <div class="timenode column" data-date="2017-01-18" data-timenode="10">240</div>
  <div class="timenode column" data-date="2017-01-19" data-timenode="1">241</div>
  <div class="timenode column" data-date="2017-01-19" data-timenode="2">242</div>
  <div class="timenode column" data-date="2017-01-19" data-timenode="3">243</div>
  <div class="timenode column" data-date="2017-01-19" data-timenode="4">244</div>
  <div class="timenode column" data-date="2017-01-19" data-timenode="5">245</div>
  <div class="timenode column" data-date="2017-01-19" data-timenode="6">246</div>
  <div class="timenode column" data-date="2017-01-19" data-timenode="7">247</div>
  <div class="timenode column" data-date="2017-01-19" data-timenode="8">248</div>
  <div class="timenode column" data-date="2017-01-19" data-timenode="9">249</div>
  <div class="timenode column" data-date="2017-01-19" data-timenode="10">250</div>
  <div class="timenode column" data-date="2017-01-20" data-timenode="1">251</div>
  <div class="timenode column" data-date="2017-01-20" data-timenode="2">252</div>
  <div class="timenode column" data-date="2017-01-20" data-timenode="3">253</div>
  <div class="timenode column" data-date="2017-01-20" data-timenode="4">254</div>
  <div class="timenode column" data-date="2017-01-20" data-timenode="5">255</div>
  <div class="timenode column" data-date="2017-01-20" data-timenode="6">256</div>
  <div class="timenode column" data-date="2017-01-20" data-timenode="7">257</div>
  <div class="timenode column" data-date="2017-01-20" data-timenode="8">258</div>
  <div class="timenode column" data-date="2017-01-20" data-timenode="9">259</div>
  <div class="timenode column" data-date="2017-01-20" data-timenode="10">260</div>
  <div class="timenode column" data-date="2017-01-21" data-timenode="1">261</div>
  <div class="timenode column" data-date="2017-01-21" data-timenode="2">262</div>
  <div class="timenode column" data-date="2017-01-21" data-timenode="3">263</div>
  <div class="timenode column" data-date="2017-01-21" data-timenode="4">264</div>
  <div class="timenode column" data-date="2017-01-21" data-timenode="5">265</div>
  <div class="timenode column" data-date="2017-01-21" data-timenode="6">266</div>
  <div class="timenode column" data-date="2017-01-21" data-timenode="7">267</div>
  <div class="timenode column" data-date="2017-01-21" data-timenode="8">268</div>
  <div class="timenode column" data-date="2017-01-21" data-timenode="9">269</div>
  <div class="timenode column" data-date="2017-01-21" data-timenode="10">270</div>
  <div class="timenode column" data-date="2017-01-22" data-timenode="1">271</div>
  <div class="timenode column" data-date="2017-01-22" data-timenode="2">272</div>
  <div class="timenode column" data-date="2017-01-22" data-timenode="3">273</div>
  <div class="timenode column" data-date="2017-01-22" data-timenode="4">274</div>
  <div class="timenode column" data-date="2017-01-22" data-timenode="5">275</div>
  <div class="timenode column" data-date="2017-01-22" data-timenode="6">276</div>
  <div class="timenode column" data-date="2017-01-22" data-timenode="7">277</div>
  <div class="timenode column" data-date="2017-01-22" data-timenode="8">278</div>
  <div class="timenode column" data-date="2017-01-22" data-timenode="9">279</div>
  <div class="timenode column" data-date="2017-01-22" data-timenode="10">280</div>
</div>

＆＃13;

＆＃13;

＆＃13; jsfiddle：https://jsfiddle.net/czzbb08o/6/