为具有相同类的元素添加分隔符

Question

This html:

<table>
<tr>
  <td>
    <a class='link-separated'>foo</a>
  </td>
</tr>
<tr>
<td>
  <a class='link-separated'>foo</a>
  <a class='link-separated'>bar</a>
</td>
</tr>
<tr>
  <td>
    <a class='link-separated'>foo</a>
    <a class='link-separated'>bar</a>
    <a class='link-separated'>xyz</a>
  </td>
</tr>
</table>

will produce:

foo
foo bar
foo bar xyz

What I want to get is:

foo
foo | bar
foo | bar | xyz

I've managed something like this: https://jsfiddle.net/61yfcnjh/ but this solution is weird - .link-separated is used twice. How can it be done better?

Answer 1

You can use this code to further simplify it:

$("td a.link-separated:not(:last-child)").after(" | ");

Try it:

 $("td a.link-separated:not(:last-child)").after(" | ");

 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <table> <tr> <td> <a href="#" class='link-separated'>foo</a> </td> </tr> <tr> <td> <a href="#" class='link-separated'>foo</a> <a href="#" class='link-separated'>bar</a> </td> </tr> <tr> <td> <a href="#" class='link-separated'>foo</a> <a href="#" class='link-separated'>bar</a> <a href="#" class='link-separated'>xyz</a> </td> </tr> </table>