通过动态创建的 id 动态 select 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()，但我希望它们仅在这个特定的画廊而不是所有画廊中对图像进行排序。如果我有一个画廊，它工作正常。当我添加更多画廊时，问题就开始了。我应该如何 select 变量 $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

未测试，但我认为这会影响：

HTML:

sortImagesByPublishedDate(this)//pass this

JS：

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

Answer 2

在 append

的 html 中将 this 传递给 sortImagesByPublishedDate(this)

所以你的密码是

function sortImagesByPublishedDate(thisObj) {

然后

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

Answer 3

$(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 4

使用 .siblings 方法 select 元素是另一个元素的兄弟元素。所以在你的情况下你可以打电话

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

通过动态创建的 id 动态 select div

Dynamically select div by dynamically created id

html

javascript

jquery

function

jquery-selectors