通过 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(

  "<style>#fp_sort_col_" + idx + "::before{left:" +

    leftPos +

    "px !important;right: auto !important;}#fp_sort_col_" + idx + "::after{left:" +

    rightPos +

    "px !important;right: auto !important;}</style>"

);