javascript - 通过动态创建的id动态选择div

Question

我创建了一个函数来创建 HTML 代码块。它的 id 是使用从表单收集的标签变量动态创建的。代码:

$(function() {
  $("#addTag").click(function() {
    var tag = $("#tag").val();
    $('section').append('<div id="galleryContainer' + tag + '"><div class=".gallery-header"><h1 >Tag:' + tag + '</h1><div class=".gallery-sort"><p>Sort by:</p><button onclick="sortImagesByPublishedDate()" >Data published</button><button onclick="sortImagesByTakenDate()">Data taken</button><div data-tag="' + tag + '" class="gallery component" id="' + tag + '"></div></div></div></div>');
    mainFunction(tag);
  });
});

然后我想通过单击按钮来使用 sortImagesByPublishedDate() 和 sortImagesByTakenDate()，但我希望它们仅在该特定图库中对图像进行排序，而不是在所有图像中排序画廊。如果我有一个画廊，那就很好了。当我添加更多画廊时，问题就开始了。我应该如何在以下函数中选择变量$gallery？

function sortImagesByPublishedDate() {
  var $gallery = $('div.gallery'),
    $galleryA = $gallery.children('a');

  $galleryA.sort(function(a, b) {
    var an = a.getAttribute('data-published'),
      bn = b.getAttribute('data-published');

    if (an > bn) {
      return 1;
    }
    if (an < bn) {
      return -1;
    }
    return 0;
  });

  $galleryA.detach().appendTo($gallery);
}

Answer 1

使用.siblings方法选择与另一个元素是同级的元素。所以在你的情况下你可以打电话

var $gallery = $(buttonElement).siblings(".gallery");

由于您使用内联 JS 调用排序函数，因此您需要修改它以将 this 传递给您的函数，这样您就可以获得对所单击按钮的引用，即:

修改后的html

<button onclick="sortImagesByPublishedDate(this)">Date published</button>

JS

function sortImagesByPublishedDate(ele){
  var $gallery = $(ele).siblings(".gallery"),

演示

$(function(){
  $("#addTag").click(function(){
    var tag=$("#tag").val();
    $('section').append('<div id="galleryContainer'+tag+'"><div class=".gallery-header"><h1 >Tag:'+tag+'</h1><div class=".gallery-sort"><p>Sort by:</p><button onclick="sortImagesByPublishedDate(this)" >Data published</button><button onclick="sortImagesByTakenDate(this)">Data taken</button><div data-tag="'+tag+'" class="gallery component" id="'+tag+'"></div></div></div></div>');
    //mainFunction(tag);
  });
});

function sortImagesByPublishedDate(ele){
  var $gallery = $(ele).siblings(".gallery"),
      $galleryA = $gallery.children('a');
  alert($gallery[0].id);

  $galleryA.sort(function(a,b){
    var an = a.getAttribute('data-published'),
        bn = b.getAttribute('data-published');

    if(an > bn) {
      return 1;
    }
    if(an < bn) {
      return -1;
    }
    return 0;
  });

  $galleryA.detach().appendTo($gallery);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="tag">
<button id="addTag">Add</button>
<section>
</section>

您可以使用delegated event代替内联js处理为您的按钮设置监听器:

修改后的html

<button class="sortButton" data-sort="date">Data published</button>
<button class="sortButton" data-sort="taken">Data taken</button>

JS

$("section").on("click",".sortButton",function(){
   //'this' will be the button clicked
   var $gallery = $(this).siblings(".gallery");
   var sortBy = $(this).data("sort");
   if(sortBy == "date"){
        //do date sort
   } else if(sortBy == "taken"){
        //do taken sort
   }
   //... rest of code
});