Return dynamic string concatenated with jQuery

Question

I want to have the following in my javascript code using jquery:

$('.attrs span:nth-child(1)').text() + ' | ' + $('.attrs span:nth- 
child(2)').text() + ' | ' + $('.attrs span:nth-child(3)').text() ...

Though the number of children span elements will change so I have worked on it dynamically like so:

      function getString(containerElem) {
            var str = '';
            for (var i = 0; i < containerElem.children().length; i++) {
                    ((i + 1) == containerElem.children().length) ? str += '$(\'.attrs span:nth-child('  + (i + 1) +  ')\').text()' : str += '$(\'.attrs span:nth-child('  + (i + 1) +  ')\').text() + \'  \' + ';
            }
            return str;
       }

When I return it as a string the jQuery will not work as the $ is a string now as well, can I do this using some flag or global variable to add to the string somehow ie $.getString() + $.getString2()... depending on how many span elements my container has?

If something like this $('.attrs span:nth-child(1)').text() is returned as a string, You could use eval(Yourstring), but if I was you, i would look for a better way of doing this. — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Aug 21, 2018 at 10:04

Zenoo · Accepted Answer · 2018-08-21 10:13:01Z

4

You don't need to know how many <span> you have, you can just select them all with
$('.attrs span').

Then, just get their text values with innerText and use Array#join to create your String:

let spans = $('.attrs span');

let result = spans.get().map(e => e.innerText).join(' | ');
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="attrs">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

answered Aug 21, 2018 at 10:13

Zenoo

12.9k4 gold badges48 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

feeela · Accepted Answer · 2018-08-21 10:14:44Z

1

The jQuery children method can be called with a selector as argument, to limit the list of children to that selector. This way you can find all child elements that are a SPAN, iterate over that list of elements read the inner text.

function getString(containerElem) {
  var str = '';

  containerElem.children('span').each(function(i, element) {
    str += jQuery(element).text();
  });

  return str;
}

console.log(getString(jQuery('.attrs')));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="attrs">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

answered Aug 21, 2018 at 10:14

feeela

30k7 gold badges61 silver badges73 bronze badges

Collectives™ on Stack Overflow

Return dynamic string concatenated with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related