通过动态创建的 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
});

Answer 2

$(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>');
        sortImagesByPublishedDate(tag);  **// call the function and pass param tag**
        mainFunction(tag);
    });
});

function sortImagesByPublishedDate(tag) {
    **// instead of class select id**
    var $gallery = $('div#galleryContainer'+tag),
        $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 3

未经测试，但我认为这将适用：

HTML：

sortImagesByPublishedDate(this)//pass this

JS：

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

Answer 4

将this 传递到sortImagesByPublishedDate(this) 中的html 或append

所以你的代码是

function sortImagesByPublishedDate(thisObj) {

然后做

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