Question

我在一个页面上有两个具有相同ID的元素。当我尝试将每个元素中的数据附加到相应的div中时，它会将第一个元素中的数据附加到两个div中。

这是我的标记：

{
  "rules": {

    ".read": "root.child('Admin').child('isAdmin').child('+$AUID').val() === true",

    "Admin": {
      "isAdmin": {
        "$AUID": {

          ".read": "$AUID === auth.uid",
          ".write": "$AUID === auth.uid",
          ".validate": "newData.hasChildren(['active'])",

          "active": {

            "active": "true"
          },
        },
      },
    },
}

这是我正在使用的jQuery：

<div id="data" class="democlass" data-author="Mr. Jhon Doe" data-cat="Technology" data-url="http://www.youtube.com/"></div>
<div class="post">    
    <p class="data-author"></p>
    <p class="data-cat"></p>
    <a href="#" class="data-url"></a>
</div>    

<div id="data" class="democlass" data-author="Mrs. Mona" data-cat="Personal" data-url="http://www.google.com/"></div>
    <div class="post">
        <p class="data-author"></p>
        <p class="data-cat"></p>
        <a href="#" class="data-url"></a>
    </div>

如何将第一个元素的数据追加到第一个$(document).ready(function() { var $ele = $("#data"); $( ".data-author" ).append($ele.attr("data-author")); $( ".data-cat" ).append($ele.attr("data-cat")); $( ".data-url" ).append($ele.attr("data-url")); $(".data-url").attr('href' , 'http://example.com/test/' + $ele.data('url')) });，将第二个元素的数据追加到第二个.post？

正在运行codepen进行测试

Answer 1

首先，更改您的标记，以便您拥有唯一的ID。 ID属性旨在是唯一的。使用class将您希望以某种方式处理的元素组合在一起。

请注意，如果您在多个元素中使用相同的ID jQuery may not do what you expect - 请特别注意使用jQuery / javascript时使用相同的ID。

但是 - 回答问题，这不是关于具有相同值的多个ID，而是如何使数据从多个元素填充到相关的div中：

使用.each和.next：

＆＃13;

// no-conflict-mode safe document ready shorthand
jQuery(function() {
  // get the items by class instead of id
  var $items = $(".democlass");
  // loop over the items
  $items.each(function() {
    // load $post with the desired div with the class of .post
    var $post = $(this).next('.post');
    // put the data into the html
    $post.find(".data-author").text($(this).attr("data-author"));
    $post.find(".data-cat").text($(this).attr("data-cat"));
    $post.find(".data-url").text($(this).attr("data-url"));
    $post.find(".data-url").attr('href', 'http://example.com/test/' + $(this).data('url'));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="data" class="democlass" data-author="Mr. Jhon Doe" data-cat="Technology" data-url="http://www.youtube.com/"></div>
<div class="post">
  <p class="data-author"></p>
  <p class="data-cat"></p>
  <a href="#" class="data-url"></a>
</div>
<div id="data" class="democlass" data-author="Mrs. Mona" data-cat="Personal" data-url="http://www.google.com/"></div>

<div class="post">
  <p class="data-author"></p>
  <p class="data-cat"></p>
  <a href="#" class="data-url"></a>
</div>

＆＃13;

为多个元素应用每个函数

1 个答案: