Выбор каждого элемента, кроме последнего элемента вложенного div, используя jquery

Question

У меня есть следующее html

<div class="main">
    <span>1</span>
    <span>2</span>
</div>
<div class="main">
    <span>3</span>
    <span>4</span>
</div>
<div class="main">
    <span>5</span>
    <span>6</span>
    <span>7</span>
</div>

Мне нужно добавить запятую к каждому элементу внутри диапазона, кроме последнего. Вот селектор, который я использую

$(".main span :not(:last)").append(', ');

Но он добавляется к каждому элементу, кроме самого последнего элемента, который равен 7. Как я могу выбрать тему отдельно? Спасибо

Answer 1

Если я правильно понимаю ваш вопрос, вы можете сделать это так:

 $(".main").each(function() {
   $(this).find("span:not(:last)").append(', ');
 }) 

Answer 2

Ваш селектор добавляет все элементы, соответствующие одной коллекции, даже если они не находятся в одном контейнере. Как вы сказали, вам нужно нацелиться на .each() div по отдельности, а затем искать span внутри.

$('.main').each(function() {
  $(this).children('span:not(:last)').append(', ');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <span>1</span>
  <span>2</span>
</div>
<div class="main">
  <span>3</span>
  <span>4</span>
</div>
<div class="main">
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>