javascript - 将最后一个可见的伪元素向左移动 12px

Question

我想将最后一个可见的伪元素向左移动 12px。此规则将所有可见的伪元素向左移动 12px:

document.styleSheets[0].addRule('.dataTable thead tr th.sorting:before', 'right: 12px;');

我需要类似 jQuery 的 find(':visible:last') 的东西。也欢迎其他方法。

http://jsfiddle.net/mmushtaq/2qpgjw0b/

Answer 1

您可以使用 jQuery 选择所有可见元素并在窗口调整大小时应用逻辑。您可以注意到，可见元素的样式上没有 display:none，因此您可以在 style 上使用属性选择器和 :not()像这样:

$('.dataTable thead tr th.sorting:not([style*=none])').last()

您选择样式中没有 none 的所有元素，然后使用 .last() 仅获取最后一个元素。但是使用 jQuery，您无法操作 :after 元素，因此您可以向该元素添加特定的类，并使用 CSS 将样式应用于伪元素。所以你的代码将是这样的:

$(window).resize(function() {
  /*Remove the class from the previous element */
  $('.special').removeClass('special');

  /*Add the class to only the last visible element*/
  $('.dataTable thead tr th.sorting:not([style*=none])').last().addClass('special');
})

.special:after {
  right: 15px;
}

这是一个工作示例，我仅更改最后一个 vsibile 元素的颜色(调整窗口大小以查看):

http://jsfiddle.net/2qpgjw0b/5/