Set html contents of an element using jQuery but with multiple elements of the same class

Question

As the title says, I'm trying to set the html contents of an element using jQuery. The context that I'll be using this is when a user hovers over a row on a table. While hovering a popup will display with information specific to the row. However, because the rows contain the same class jQuery's $().html() class will only display information about the first element that matches that class.

Here's the snippet of code

$(".row").hover(
  function() {
    $(".popup").html(
      $(".content-to-be-displayed").html()
    );
    $(".popup").show();

    $(window).on("mousemove.tooltip", function(e) {
      var x = (e.clientX + 20) + 'px',
          y = (e.clientY + 20) + 'px';
      $(".popup").css({
        top: y,
        left: x,
      });
    });
  },
  function() {
    $(".popup").hide();
    $(window).off("mousemove.tooltip");
  }
);

HTML in partial

<tr class= "row">
<div class="content-to-be-displayed" style="display: none;">
  <h4>Header:</h4>
  <% example_model.example.each do |example| %>
         <p>
           <%= 'erb plus html content' %>
         </p>
        <% end %>
     </div>
   </tr>

HTML in template

 <%= row do %>
 <thead>
 </thead>
 <tbody>
    <div class="popup"></div>
    <%= render partial: 'partial', collection: @data %>
 </tbody>
 <% end %>

Answer 1

Use a combination of $(this) and .find

Working example: https://jsfiddle.net/osvLs54L/

HTML

    <div class="row">
        <div class="content-to-be-displayed">
            Weee1
        </div>
    </div>
    <div class="row">
        <div class="content-to-be-displayed">
            Weee2
        </div>
    </div>
    <div class="row">
        <div class="content-to-be-displayed">
            Weee3
        </div>
    </div>

    <div class="popup">

    </div>

JQuery

$(".row").hover(
 function() { $(".popup").html( $(this).find('.content-to-be-displayed').html());}
);

EDIT: Your table structure is invalid html and I am impressed your browser is even displaying much of anything. Please read here for the proper structure. https://css-tricks.com/complete-guide-table-element/

In the example you've given, just initiallity make these adjustments so it is valid (adding your content to elements under the elements

HTML in template

 <%= row do %>
 <thead>
 </thead>
 <tbody>
    <tr>
     <td>
      <div class="popup"></div>
     </td>
    </tr>

    <%= render partial: 'partial', collection: @data %>
 </tbody>
 <% end %>

HTML in partial

<tr class= "row">
 <td>
   <div class="content-to-be-displayed" style="display: none;">
    <h4>Header:</h4>
    <% example_model.example.each do |example| %>
         <p>
           <%= 'erb plus html content' %>
         </p>
     <% end %>
    </div>
 </td>
</tr>

Answer 2

I'm not entirely sure what you are trying to do - but I'll give it a try. Don't use separate popup elements (you can, but its not clean). Try storing the popup data in a data attribute.

When you are using a class Selector which targets multiple elements you can refer to the current element with the this variable which is pointing to the actual element who triggered the event - this way you can use it to use only its attributes / childrens etc...

Here is a Quick demo: JSnippet Demo

HTML:

<table>
  <tr class="row" data-popup="Popup Row 1 Data">
    <td>Row 1</td>
    <td>Hover Me</td>
  </tr>
  <tr class="row" data-popup="Popup Row 2 Data">
    <td>Row 2</td>
    <td>Hover Me</td>
  </tr>
  <tr class="row" data-popup="Popup Row 3 Data">
    <td>Row 3</td>
    <td>Hover Me</td>
  </tr>
</table>
<div class="popup"></div>

JS:

$(function(){
  $(".row").hover(
    function() {
      var $this = $(this);
      $(".popup").text($this.data("popup"));
      $(".popup").css({ 
        top: $this.offset().top, 
        left:  $this.offset().left + $this.width() + 5,
        width: $this.width()
      }).show();
    },
    function() {
      $(".popup").hide();
    }
  );
});