jQuery nth child of a span in a list from event parameter

Question

I would like to get the text() values of every span. Best case scenario would involve a solution that makes use of the "event"-parameter.

$(document).ready(function () {
    $('li').click(function (e) {
      console.log($("span:nth-of-type(1n)").text());
      console.log($("span:nth-of-type(2n)").text());
      console.log($("span:nth-of-type(3n)").text());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>
      <span>li1 + span1</span>
      <span>li1 + span2</span>
      <span>li1 + span3</span>
    </li>
    <li>
      <span>li2 + span1</span>
      <span>li2 + span2</span>
      <span>li3 + span3</span>
    </li>
  </ul>
</div>

If you have any idea, I would highly appreciate a working snippet.

The expected output would be something like:

let var1 = $("span:nth-of-type(1n)").text(); // li1 + span1
let var2 = $("span:nth-of-type(2n)").text(); // li1 + span2
let var3 = $("span:nth-of-type(3n)").text(); // li1 + span3

In the forEach-loop solution, I would need the span's text element in every loop, which I don't have.

Your code seems to be working. Do you have an issue with it? What output are you expecting to have? — Rory McCrossan, Mar 27 '17 at 14:55
@RoryMcCrossan: Not really, note the first `console.log` output. — T.J. Crowder, Mar 27 '17 at 14:56
That's because it's getting the text of every `1n` span. I get that it may not be what the OP wants, but they haven't specified what they *do* want. I didn't downvote you FYI — Rory McCrossan, Mar 27 '17 at 14:57
@RoryMcCrossan I would assume they have more than three span tags or a variable number. I think they just want to display the text from each span separately — George, Mar 27 '17 at 14:57
It is not really a duplicate per se, since I am not looking for a solution involving a forEach loop to print all the results inside the console, but rather assign each span's text() value to a local variable. Could anybody assist please? — AppRoyale, Mar 28 '17 at 14:08

T.J. Crowder · Answer 1 · 2017-03-27T15:00:28.753

3

Best case scenario would involve a solution that makes use of the "event"-parameter

You can do that, but there's no need to; this within the click callback will be the li element on which the event was hooked. (But see the second snippet below if you really want to use the event parameter.)

So we can loop through the spans within the li, either using $(this).find("span") (all descendants) or $(this).children("span") (just direct children):

$(document).ready(function () {
    $('li').click(function (e) {
      $(this).children('span').each(function() {
        console.log($(this).text());
      });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>
      <span>li1 + span1</span>
      <span>li1 + span2</span>
      <span>li1 + span3</span>
    </li>
    <li>
      <span>li2 + span1</span>
      <span>li2 + span2</span>
      <span>li3 + span3</span>
    </li>
  </ul>
</div>

If using the event parameter is really important, we can use e.currentTarget to get the same thing this gives us in the above:

$(document).ready(function () {
    $('li').click(function (e) {
      $(e.currentTarget).children('span').each(function() {
        console.log($(this).text());
      });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>
      <span>li1 + span1</span>
      <span>li1 + span2</span>
      <span>li1 + span3</span>
    </li>
    <li>
      <span>li2 + span1</span>
      <span>li2 + span2</span>
      <span>li3 + span3</span>
    </li>
  </ul>
</div>

edited Mar 27 '17 at 15:00

answered Mar 27 '17 at 14:55

T.J. Crowder

1,031,962
187
1,923
1,875

I find useful. I made the same answer and before posting I found your answer. +1 – Sagar V Mar 27 '17 at 14:57
Yeah, not really sure why this was downvoted. – George Mar 27 '17 at 14:58
Same on my answer, it exactly fits the requirement but get downvoted ... love this community <3 – enno.void Mar 27 '17 at 14:59
@mr.void you just copied the code OP posted. – George Mar 27 '17 at 15:00
Perhaps the issue was not using the event parameter. I *did* fail to address that originally, so I've added that now. – T.J. Crowder Mar 27 '17 at 15:01
@George ... better look twice ... there is an $(this) – enno.void Mar 27 '17 at 15:01
@George: No, there's a crucial difference between mr.void's and the OP's: Using `$(this)` rather than searching globally. – T.J. Crowder Mar 27 '17 at 15:01
I am not looking for a solution involving a forEach loop to print all the results inside the console, but rather assign each span's text() value to a local variable. Could anybody assist please? – AppRoyale Mar 28 '17 at 14:09

enno.void · Answer 2 · 2017-03-28T14:39:14.083

-1

https://jsfiddle.net/g998f2hv/1/

$(document).ready(function () {
    $('li').click(function (e) {
      var spans = $(this).find("span");
      console.log($(spans[0]).text());
      console.log($(spans[1]).text());
      console.log($(spans[2]).text());
    });
});

edited Mar 28 '17 at 14:39

answered Mar 27 '17 at 14:55

enno.void

6,242
4
25
42

Yeah downvote more... for all who says that wont work or return an empty string here an WORKING FIDDLE... BUT YEAH DOWNVOTE MORE PLS https://jsfiddle.net/g998f2hv/ – enno.void Mar 28 '17 at 14:26
li1 + span1li1 + span2li1 + span3 li1 + span2 li1 + span3 This is not the output wanted and actually the same output I have in my initial post. – AppRoyale Mar 28 '17 at 14:28
Ah okay i got it, i updated my answer – enno.void Mar 28 '17 at 14:39
That fiddle is not working unfortunately. – AppRoyale Mar 28 '17 at 14:41

jQuery nth child of a span in a list from event parameter

2 Answers2