javascript - 具有 "left: 0px"的元素上的绑定(bind)事件

Question

<span class="switchery switchery-small" style="box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; border-color: rgb(223, 223, 223); transition: border 0.4s, box-shadow 0.4s; background-color: rgb(255, 255, 255);">
    <small style="left: 0px; transition: background-color 0.4s, left 0.2s;"></small>
</span>

我正在使用一个插件，它生成了上面的代码。如何选择左侧为 0px 的小标签的 switchery？

这是我写的

if ($('.switchery').find('small').attr('style').indexOf('0px') > -1) {

}

但是我如何应用 click() 我的 matches 元素。

Answer 1

使用filter带回调。

1. 选择所有 <small>里面的元素.switchery元素
2. 过滤具有left的元素属性(property)零

var smallEl = $('.switchery small').filter(function() {
  return parseInt($(this).css('left')) === 0;
}).css('color', 'green');

smallEl.click(function() {
  console.log('Hello');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="switchery switchery-small" style="box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; border-color: rgb(223, 223, 223); transition: border 0.4s, box-shadow 0.4s; background-color: rgb(255, 255, 255);">
  <small style="left: 0px; transition: background-color 0.4s, left 0.2s;">Left 0</small>
  <small style="left: 100px; transition: background-color 0.4s, left 0.2s;">Left 100</small>
  <small style="transition: background-color 0.4s, left 0.2s;">No Left</small>
</span>