将最后一个可见的伪元素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将样式应用于伪元素。所以你的代码将是这样的：

＆＃13;

＆＃13;

$(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');
})

＆＃13;

.special:after {
  right: 15px;
}

＆＃13;

＆＃13;

＆＃13;

这是一个工作示例，我只更改最后一个vsibile 元素的颜色（调整大小窗口）：

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