CODEWITHSUNDEEP
jquery
Sagar Raj
Sagar Raj

Reputation: 939

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

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.

Upvotes: 0

Views: 43

Answers (2)

Kaddath
Kaddath

Reputation: 6151

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>

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074385

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.

Upvotes: 0

Related Questions