通过 jquery 添加伪元素 CSS 到特定的 id 也被应用于其他 th 元素

Question

我正在尝试定位使用伪元素::before和放置的排序图标::after。这看起来像：

jQuery(function($){

  $('#fpTable').on( 'draw.dt', function (e) {

    $('#fpTable thead tr th:visible:not(".no-sort")').each(function(idx, ele) {

      

      let leftPos = Math.round(($(ele).width() + $(ele).textWidth()) / 2);

      let rightPos = leftPos+8;

      $(ele).attr('id','fp_sort_col_'+idx);

      $('#fp_sort_col_'+idx).append("<style>::before{left:"+leftPos+"px !important;right: auto !important;}::after{left:"+rightPos+"px !important;right: auto !important;}</style>");

    })

  });

  $('#fpTable').dataTable({

    "bLengthChange" : false,

    "paging": false,

    "bFilter": false,

    "columnDefs": [ {

      "targets"  : 'no-sort',

      "orderable": false,

    }],

    // "stateSave": true,

    // "order": [[ 6, "asc" ]]

  });

  

});

  $.fn.textWidth = function(){

    var html_org = $(this).html();

    var html_calc = '<span>' + html_org + '</span>';

    $(this).html(html_calc);

    var width = $(this).find('span:first').width();

    $(this).html(html_org);

    return width;

  };

在这里，我在第 1、4 和 6 列有排序图标。我想将这些图标放在文本之后th。而且，为此，我计算了每个 th 的宽度，并尝试使用绝对位置在其后放置图标。

为此，我已经添加id到每个th需要更新位置的地方。然后，尝试将样式附加到这些 id，但发生的情况是，它没有将 CSS 应用于#id::before，而是应用于th::before. 因此，最后一列的位置值也在更新第一列和第四列的位置值。

如果你需要jsfiddle链接。

图片是为了让事情更清楚。#PS 宽度可能因屏幕尺寸而异。

Answer 1

您要附加以下内容：<style>::before{le ....这将选择所有元素::before并向 DOM 中存在的每个可以具有::before伪元素的元素添加一个伪元素。你可以做的是：$("#fp_sort_col_" + idx).append(&nbsp; "<style>#fp_sort_col_" + idx + "::before{left:" +&nbsp; &nbsp; leftPos +&nbsp; &nbsp; "px !important;right: auto !important;}#fp_sort_col_" + idx + "::after{left:" +&nbsp; &nbsp; rightPos +&nbsp; &nbsp; "px !important;right: auto !important;}</style>");