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;
}

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

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