使用jQuery设置元素的html内容，但具有同一类的多个元素

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();
    }
  );
});