Question

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

的方式

$（＆＃39; .item＆＃39;）。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循环而不是每个用于索引。在你的情况下

   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（），则必须在其中引入count并检查计数值

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每个行项目点击第3项后附加数据html

4 个答案: