遍历从数据库 Ruby/Javascript 检索到的元素

Question

我正在处理这个问题，当然不知道如何解决。我可能选择了错误的方法，但让我再解释一下。正在从我的 SQLite 数据库中检索某些信息，此类信息用于在我的 DOM 中构建 div 结构。这个 div 结构表示商店中的一个项目，每个元素都应该附加一个动作，我使用一些 JS 来实现。这是现在的样子：

HTML5:

<!-- Iterates over all activities retrieved from database -->

    <div class="row"  id="activity" draggable="true">
        <% @activities.each do |activity| %>

        <div class="large-4 small-6 columns">
            <div><%= image_tag activity.picture_url, :class => "img-style"%></div>

            <div class="panel img-panel" >
            <h5><%= activity.title %></h5>
            <h6 class="subheader"><%= activity.price %></h6>
                    </div>
        </div>

        <% end %>
    </div>

<!-- ends iteration -->

JS:

window.onload = function() {
   var activities = document.getElementById("activity");
   console.log('Length: '   + activities.length);

   var count = 0;
   for (act in activities) {
     var activity = activities[act];
     count++;
     console.log(count);

     activity.addEventListener('dragstart', activityDraggingStart, false);
     }

  function activityDraggingStart(e) {
        this.style.backgroundColor = 'blue';
  }
};

所以问题出在JS代码上：

首先，length returns 是一个未定义的，因为它是一个对象，但它应该是一个数组，不是吗？
其次，如果数据库只有三个记录，我使用计数变量，它显示超过 200，这很尴尬，因为它应该只循环三次。
最后但同样重要的是，我想向检索到的元素添加一个动作，因为我正试图通过拖放功能解决问题，但我做不到，因为显然 activity 是 DOM 个元素的节点列表，只有每个元素都有 addEventListener。

在这种特殊情况下应该做什么？最好的方法是什么？基本上我想要实现的是将事件侦听器添加到我的 "activity" div，以便在 'dragstart' 和 'dragstop' 事件发生时做一些事情。

Answer 1

我相信您第一个问题的答案是您正在尝试对一个 ID 调用 .length，默认情况下，该 ID 应该只有一个项目。如果您试图获取列出的所有活动的数组，我会将 ID 设为 class 并将您的循环移到所有 div 之外，例如

<% @activities.each do |activity| %>
  <div class="row activity" draggable="true">

    <div class="large-4 small-6 columns">
      <div><%= image_tag activity.picture_url, :class => "img-style"%></div>

      <div class="panel img-panel" >
      <h5><%= activity.title %></h5>
      <h6 class="subheader"><%= activity.price %></h6>
                </div>
    </div>

  </div>
<% end %>

其次，它显示 200 的原因是因为它只有一个项目（因为 "getElementByID"）它正在计算字符串中的字符数，将那个坏男孩更改为 "getElementsByClassName."

第三个……好吧……改变这些可能会解决问题……但我不完全确定。无论如何，我希望这对您有所帮助。

Answer 2

在您的示例中，活动不是数组，它是一个元素，没有长度。

不确定您要完成什么，但请尝试：

var activity = document.getElementById("activity");
 var activities = activity.children;

或

 var activity = document.getElementById("activity");
 var activities = activity.childNodes;

或每个 class 例如面板/列或其他：

var activity = document.getElementById("activity");
var activities = activity.getElementsByClassName('panel');

Id 不直接 return 类数组对象。

Answer 3

认为一个问题可能是您有多个具有相同 ID 名称的元素。尝试将其更改为 class。

我的做法是遍历行并向每个行添加 jquery ui 可拖动。

这里是 fiddle.

https://jsfiddle.net/0wnwt29j/1/

 $(function () {

     var numItems = $('.activity').length;
     $('#myspan').text('num of activities: ' + numItems);

     $(".row").each(function (index) {
         var myelement = $(this);
         myelement.draggable({
             start: function () {
                 myelement.addClass('blue');
             },
             stop: function () {
                 myelement.removeClass('blue');
             }
         });
     });


 });

Answer 4

你所有的麻烦都是因为误用了html属性id。

问题 1 的答案

因为 id 是单个 DOM 元素的标识，单个网页不应包含 2 个或更多具有相同 ID 的 DOM 元素。

你可以改变

<div class="row" id="activity" draggable="true">

到

<div class="row" class="activity" draggable="true">

和select他们

document.getElementsByClassName('activity');

问题 2 和 3 的答案

因为 document.getElementById() returns 只有一个 DOM 元素，你正在遍历它的 200 多个属性，这就是为什么你的 count 变量的数量是，并且为什么不能将事件侦听器附加到它们。如果您根据后一个答案更改了代码，那么应该没问题。

遍历从数据库 Ruby/Javascript 检索到的元素

Iterate over elements retrieved from database Ruby/Javascript

javascript

ruby

jquery

drag-and-drop

ruby-on-rails-4