jQuery .each() - Getting the text of array values

Question

I've got stuck in a small piece of code. The setup is something like this -

<span class="span1">Something here</span>
<div><h3>Required Text</h3></div>
<span class="span2">Something here</span>
<div><h3>Required Text</h3></div>
<span class="span3">Something here</span>
<div><h3>Required Text</h3></div>
<span class="span4">Something here</span>
<div><h3>Required Text</h3></div>
<span class="span5">Something here</span>
<div><h3>Required Text</h3></div>

$(document).ready(function () { 
        var appendLblarr = [".span1", ".span2", ".span3", ".span4", ".span5"];            
        $.each(appendLblarr, function (i, val) {
            var appendLabel = $(".span1 + div h3").text();
            jQuery(val).mouseover(function(){
                //alert();
                $(this).append("<div class='appendedTT'><p>" + appendLabel + "</p></div>");  
            })

            .mouseout(function() {
                $( ".appendedTT" ).remove();
            });
      });      
});

In the variable appendLabel, I'm trying to get the text of the <h3> which is in a <div> next to a <span>

The question is, how do i put that in a loop.

@T.J.Crowder - I'm trying to get the text that is inside the <h3> into the appendedTT <div> — Sagar Raj
– Sagar Raj, Commented Jun 3, 2019 at 10:04
@T.J.Crowder - each in its own. I'm basically appending a tooltip onhover. — Sagar Raj
– Sagar Raj, Commented Jun 3, 2019 at 10:06
My question is, if i can use var appendLabel = $(appendLblarr + "div h3").text(); or what is the correct syntax. — Sagar Raj
– Sagar Raj, Commented Jun 3, 2019 at 10:06

Kaddath · Accepted Answer · 2019-06-03 10:20:36Z

You can use $(val) the same way you did to set event handlers to get the following div, with $(val).next().find("h3") or $(val).next("div").find("h3") if you want to explicitly restrict to a div (NOTE that second solution will return an empty selection if next element is not a div, it won't try to see following elements until it finds a div)

$(document).ready(function () { 
        var appendLblarr = [".span1", ".span2", ".span3", ".span4", ".span5"];            
        $.each(appendLblarr, function (i, val) {
            var appendLabel = $(val).next().find("h3").text();
            $(val).mouseover(function(){
                //alert();
                $(this).append("<div class='appendedTT'><p>" + appendLabel + "</p></div>");  
            })

            .mouseout(function() {
                $( ".appendedTT" ).remove();
            });
      });      
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="span1">Something here</span>
<div><h3>Required Text 1</h3></div>
<span class="span2">Something here</span>
<div><h3>Required Text 2</h3></div>
<span class="span3">Something here</span>
<div><h3>Required Text 3</h3></div>
<span class="span4">Something here</span>
<div><h3>Required Text 4</h3></div>
<span class="span5">Something here</span>
<div><h3>Required Text 5</h3></div>

T.J. Crowder · Accepted Answer · 2019-06-03 10:15:09Z

You don't need a loop for this:

$(".span1, .span2, .span3, .span4, .span5")
.on("mouseover", function() {
  var $this = $(this);
  var tt = $("<div class=appendedTT></div>");
  tt.text($this.next("div").find("h3").text());
  $this.append(tt);
})
.on("mouseout", function() {
  $(this).find(".appendedTT").remove();
});

That selects the five spans and sets up the mouseover and mouseout handlers. Within the mouseover handler, we go from this to the next element (which must be a div) and then into the h3 within it, grab the text, and then use that to append a .appendedTT element. Mouseout removes it.

Live copy:

$(document).ready(function () {
    $(".span1, .span2, .span3, .span4, .span5")
    .on("mouseover", function() {
      var $this = $(this);
      var tt = $("<div class=appendedTT></div>");
      tt.text($this.next("div").find("h3").text());
      $this.append(tt);
    })
    .on("mouseout", function() {
      $(this).find(".appendedTT").remove();
    });
});

<span class="span1">Something here</span>
<div><h3>Required Text 1</h3></div>
<span class="span2">Something here</span>
<div><h3>Required Text 2</h3></div>
<span class="span3">Something here</span>
<div><h3>Required Text 3</h3></div>
<span class="span4">Something here</span>
<div><h3>Required Text 4</h3></div>
<span class="span5">Something here</span>
<div><h3>Required Text 5</h3></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If you're into that sort of thing, the mouseover could be a one-liner:

$(this).append($("<div class=appendedTT></div>").text($(this).next("div").find("h3").text()));

I find one-liners like that harder to read and debug, though.

Collectives™ on Stack Overflow

jQuery .each() - Getting the text of array values

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related