找到任何重复的css类名，并为每个第一个子类添加额外的类名 - Find any repeating css classnames and add additional classname to each first-child

Find any repeating css classnames and add additional classname to each first-child

听起来有点傻。假设我有这样一段代码，但我不知道类名，因为它们是用户在wordpress中生成的。

<ul>
<li class="A"></li>
<li class="A"></li>
<li class="A"></li>
<li class="bla"></li>
<li class="bla"></li>
<li class="bla"></li>
<li class="bla"></li>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>

我需要这个:

<ul>
<li class="A first"></li>
<li class="A"></li>
<li class="A"></li>
<li class="bla first"></li>
<li class="bla"></li>
<li class="bla"></li>
<li class="bla"></li>
<li class="foo first"></li>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>
<li class="foo"></li>

是否有任何方法/想法来处理这个在javascript或php?

特定的wordpress循环是这样的:

    <?php
        add_filter('posts_orderby','raufrunter');
        $args = array(
            'post_type' => 'preistraeger',
            'meta_key' => 'wpcf-preiskategorie',
            'meta_query'  => array( array( 'key' => 'wpcf-preiskategorie', ), array( 'key' => 'wpcf-sortiername', )  )
        );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post();
        remove_filter('posts_orderby','raufrunter');
    ?>
    <?php
        $preisclass = types_render_field( "preiskategorie", array() );
        $faul = array(" ", ".", "ä", "ü", "ö");
        $preisclass = str_replace($faul, "", $preisclass);
    ?>
    <!-- here I need the extra classnam if it’s repeating itself. -->
    <span class="li <?php echo $preisclass;?>"> 
        <h6><?php echo types_render_field( "preiskategorie", array( ) );?></h6>
        <?php the_title( sprintf( '<a href="%s">', esc_url( get_permalink() ) ), '</a>' ); ?>
    </span>
    <?php 
        endwhile; 
    ?>

如果您将标识符附加到ul，您可以使用JS这样做:

let ul = document.querySelector('ul.user-list');
Array.from(ul.querySelectorAll('li'))
  .map(element => element.className.split(/'s+/))
  .reduce((a, b) => a.concat(b))
  .filter((elem, pos, arr) => arr.indexOf(elem) == pos)
  .forEach(className => ul.querySelector('li.' + className).classList.add('first'));

.A,
.bla,
.foo {
  color: lightcoral;
}
.A.first,
.bla.first,
.foo.first {
  color: lightblue;
}

<ul class="user-list">
  <li class="A">A 1</li>
  <li class="A">A 2</li>
  <li class="A">A 3</li>
  <li class="bla">bla 1</li>
  <li class="bla">bla 2</li>
  <li class="bla">bla 3</li>
  <li class="bla">bla 4</li>
  <li class="foo">foo 1</li>
  <li class="foo">foo 2</li>
  <li class="foo">foo 3</li>
  <li class="foo">foo 4</li>
  <li class="foo">foo 5</li>
</ul>

ES5版本

如果你没有使用es6，这里是es5等效的JavaScript代码:

var ul = document.querySelector('ul.user-list');
[].slice.call(ul.querySelectorAll('li'))
    .map(function (element) {
        return element.className.split(/'s+/);
    })
    .reduce(function (a, b) {
        return a.concat(b);
    })
    .filter(function (elem, pos, arr) {
        return arr.indexOf(elem) == pos;
    })
    .forEach(function (className) {
        ul.querySelector('li.' + className).classList.add('first');
    });

function sort(){
  var arr = [];
  $("ul").children("li").each(function(){
    liClass = $(this).attr("class");
    inarray = $.inArray(liClass, arr)
    if (inarray == -1){
        $(this).addClass("first");
        arr.push(liClass);
    }
  });
  
  };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="A">33</li>
<li class="A">22</li>
<li class="A">11</li>
<li class="bla">22</li>
<li class="bla">33</li>
<li class="bla">44</li>
<li class="bla">55</li>
<li class="foo">66</li>
<li class="foo">33</li>
<li class="foo">66</li>
<li class="foo">55</li>
<li class="foo">11</li>
</ul>
<button onClick="sort()">sort</button>

给你