jQuery 每行项目单击附加数据 html 在第 3 个项目之后

Question

我有一个 html 代码，如下所示，每个列表都有一个 class 和一个按钮，因此，当用户单击按钮时，它应该使用 json 附加一个 html 并在第 3 个项目之后附加，详细信息代表项目详细信息，我曾尝试使用 nth-child，但它会使我的每个 3n+3 附加 html，我想要的是当用户单击 1、2、3 项时它将在第 3 项之后附加，当单击 4、5、6 项时，它将附加详细信息html 在 6 之后。请忽略数据拉取。这是我使用的方式

$('.item').eq(i % 3).after(html_details);

这是我的 Html

<ul class="list">
    <li class="item">List 1</li>
    <li  class="item">List 2</li>
    <li  class="item">List 3</li>

    <!-- should append a html here -->

    <li  class="item">List 4</li>
    <li  class="item">List 5</li>
    <li  class="item">List 6</li>

    <!-- should append a html here -->

这是我的 jQuery

$('.item').each(function(i){

    $(this).find('a').on('click',function(){

      var html_details = detailsTemplate(data[i]);

        console.log(i)

        $('.Details').remove();

        $('.item').eq(i % 3).after(html_details);

        $('.Details').hide();
        $('.Details').slideToggle();

      return false;

    })

我该怎么做？

Answer 1

你的逻辑可以是这样的：

$('.item').eq(i + 3 - (i % 3) - 1).after(html_details);

这里有一些解释。 3 - (i % 3) 计算需要向前跳过多少项目。然后将此数字添加到当前索引 i 以获得要在其后附加内容的项目。我还添加了 - 1 以便能够使用 after 而不是 before，因此它也适用于最后一项。

查看下面的演示。

$('.item').each(function (i) {
    $(this).find('a').on('click', function () {
        var html_details = detailsTemplate(data[i]);
        console.log(i + 3 - (i % 3) - 1)        
        $('.Details').remove();
        $('.item').eq(i + 3 - (i % 3) - 1).after(html_details);
        $('.Details').hide();
        $('.Details').slideToggle();
        
        return false;
    });
});

var data = [0, 1, 2, 3, 4, 5, 6];
function detailsTemplate(d) {
    return '<div class="Details">' + (d + 1) + '</div>';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
    <li class="item">List 1 <a href="">link</a></li>
    <li class="item">List 2 <a href="">link</a></li>
    <li class="item">List 3 <a href="">link</a></li>
    <!-- should append a html here -->
    <li class="item">List 4 <a href="">link</a></li>
    <li class="item">List 5 <a href="">link</a></li>
    <li class="item">List 6 <a href="">link</a></li>
    <!-- should append a html here -->
</ul>

Answer 2

您可以使用 for 循环而不是 each 进行索引。你的情况

   for(var i=0;i<$('.item').length;i++)
    {
    $(this).find('a').on('click',function(){

          var html_details = detailsTemplate(data[i]);
                console.log(i)

            $('.Details').remove();
             if(i%3==0)
             {
                $('.item')[i].after(html_details);
              }
            $('.Details').hide();
            $('.Details').slideToggle();

        }

如果你使用 .each() 那么你必须在其中引入计数并检查计数值

Answer 3

您可以使用：

<ul class="list">
    <li class="item"><a href="javascript:void(0)">List 1</a></li>
    <li  class="item"><a href="javascript:void(0)">List 2</a></li>
    <li  class="item"><a href="javascript:void(0)">List 3</a></li>

    <!-- should append a html here -->

    <li  class="item"><a href="javascript:void(0)">List 4</a></li>
    <li  class="item"><a href="javascript:void(0)">List 5</a></li>
    <li  class="item"><a href="javascript:void(0)">List 6</a></li>
</ul>

和：

$('.item').each(function(i) {
    $(this).find('a').on('click',function() {
        var html_details = '<li class="Details">DETAILS</li>'; //detailsTemplate(data[i]);

        $('.Details').remove();

        var index = (Math.floor(i / 3) * 3) + 2;

        $('.item').eq(index).after(html_details);

        $('.Details').hide();
        $('.Details').slideToggle();

        return false;
    })
})

这里是对应的jsfiddle.

Answer 4

这是我的答案。不过我用的方式有点菜鸟。所以我会改的更干净

var details            = $('.details').html();
var detailsTemplate    = Handlebars.compile(details);
var detailsPlaceholder = $(this);

  $('.item').each(function(i){

    $(this).find('a').on('click',function(){

      $('.details').remove();

      var html_details = detailsTemplate(data[i]);
      var itemIndex = $(this).closest('.item').index()
      var itemWidth = $('.item').outerWidth(true)

      var position = $(this).closest('.item').offset().left

      tiles3(i,itemIndex);

      function tiles3(i,itemIndex){

          if(i%3 == 0){

              var left =  $('.item').length -  itemIndex;

              if(left == 1){

                $('.item').eq(i).after(html_details)

              } else if(left == 2) {

                $('.item').eq( (i%3) + i + 1 ).after(html_details)

              } else {

                $('.item').eq( (i%3) + i + 2 ).after(html_details)

              }

          } else if(i%3 == 1){

              var left =  $('.item').length -  itemIndex;

              if(left == 1){

                $('.item').eq(i).after(html_details)

              } else {

                $('.item').eq( (i%3) + i ).after(html_details)

              }

          } else {

              $('.item').eq( i ).after(html_details)

          }
      }

      return false;

    })

  })
}

jQuery 每行项目单击附加数据 html 在第 3 个项目之后

jQuery each row items click append data html after 3rd items

jquery