Добавить разделитель к элементам с тем же классом

Question

Это 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>

будет выдавать:

foo
foo bar
foo bar xyz

Что я хочу получить:

foo
foo | bar
foo | bar | xyz

Я кое-что успел вот так: https://jsfiddle.net/61yfcnjh/ но это решение странно - .link-separated используется дважды. Как это можно сделать лучше?

Answer 1

Вы можете использовать этот код для дальнейшего упрощения:

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

Попробуйте:

$("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>