jQuery implode/join strings (elements) with a custom character (hyphen)

Question

i have a selection of (2) elements, selected by this:

$(this).parents("tr:first").children("td").children("span");

when i do this:

$(this).parents("tr:first").children("td").children("span").text();

the texts in the spans (say a and b) are concatenated together (to ab), and thats almost what i want

But now i want to concatenate them by inserting a hyphen (-) in between (to a - b) I've tried this, but that doesn't work:

$(this).parents("tr:first").children("td").children("span").join(" - ");

Answer 1

Use $.map:

$.map(
  $(this).parents("tr:first").children("td").children("span"), 
  function(element) {
      return $(element).text()
  })
  .join(" - ");

Answer 2

$(this)
    .parents('tr:first')
    .children('td')
    .children('span')
    .append('-') // append hyphen to each span
    .text();

Answer 3

Perhaps something like this...

var m = [];
$(this).parents("tr:first").children("td").children("span").each(function(index, element)  {m.push(element.text());});  
return m.join(" - ");

Answer 4

you could try this may feel a little heavy just not as complex.

$(this).parents("tr:first td span:eq(0)").text() + " - " + $(this).parents("tr:first td span:eq(1)").text()