jquery - 如何使用 JQuery 和 CSS 显示以逗号分隔的动态填充的跨度元素？

Question

我有这些 span 元素，它们可能会或可能不会在运行时动态填充。我需要显示填充的 span 元素，文本用逗号分隔。因此对于下面的 HTML，输出将如下所示:'Filled 1, Filled 2, Filled 3'。

   <div>   
        <h6>
            <span>Filled1</span>
            <span></span>
            <span>Filled 2</span>
            <span>Filled 3</span>
            <span></span>
        </h6>
   </div>

我尝试通过选择非空跨度项并使用 JQuery 将它们添加到数组来实现此目的，但它似乎没有用。我怎样才能做到这一点？请帮忙。谢谢。

Answer 1

试试这个，纯 css ## 如果最后一个跨度为空，则按照我的方式进行编辑，最后留下一个逗号 ##

span:not(:first-of-type):before {content:", ";}
span:empty:before{content:"";}

<h3>
  <span>filled 1</span>
  <span>filled 2</span>
  <span></span>
  <span>filled 3</span>
  <span>filled 4</span>
  <span></span>
 </h3>