jQuery 和变量 nth-child 不起作用

Posted 2023-05-09

【中文标题】jQuery 和变量 nth-child 不起作用

【英文标题】：jQuery and variable nth-child not working

【发布时间】：2014-06-07 15:15:10

【问题描述】：

这是我创建的一个脚本，目的是在流体/固定容器中很好地显示画廊。

关键是将缩略图均匀地放置在它们的行中，同时保持每行的第一个和最后一个缩略图相对于其容器。

为此，我需要计算要应用于每个缩略图的边距，这就是该脚本的内容（只有最后一部分是相关的，但我将其全部放在这里以防万一）。

我检查了变量，它们都正常，但无论出于何种原因，脚本末尾的“nth-child”选择器内的变量不是选择性的，即使变量正确，也会应用样式到“pic_block”类的所有实例：

<script>

  $(document).ready(function() 

     // Get the width of the container and thumbnails

     var containerWidth       = $('.container').width();

     var boxWidth             = $('.pic_block').width();

     // How many thumbnails can I have per row?

     var boxesPerRow         = Math.floor(containerWidth/boxWidth);

     // And then what is the remaining space left between the last thumbnail and the container?

     var marginTotalWidth     = (containerWidth-(boxesPerRow*boxWidth));

     // What is the maximum margin-right I can set to get an equal distance between the thumbnails (except the last box)?

     var tempMarginR          = Math.floor(marginTotalWidth/(boxesPerRow-1));

     // Then, what is the space still remaining between the last thumbnail and the container?

     var extraTotalSpaceWidth = ((marginTotalWidth/(boxesPerRow-1)) - tempMarginR) *boxesPerRow;

     // Time to set some variables that would help me dispatching the remainig space between the thumbnails

     var p                    = 1; 

     var i                    = extraTotalSpaceWidth;

     var marginR              = [];     


     // By default, all the thumbnails in a row (but the last one) get the same margin-right -> this will be fined-tuned in a later loop

     while(p <= boxesPerRow) 
     
         if(p < boxesPerRow)
         
            marginR[p]=tempMarginR;     
         
         else
         
            marginR[p]=0;   
         

         $('.pic_block:nth-child('+ p +'n)').css('margin-right',marginR[p]);

         p++;
           

     // And if, after that, there is still at least 1px of extra space left...

        while(i >= 1)
            
            var s=1;

            // add incrementaly an extra margin to the right of each thumbnail of a row (except the last one) until there is no more space left

            while( s < boxesPerRow) 
               
               marginR[s] = marginR[s]++;

               if(i >= 1)
                
                   /********************************************************************/   
                   /* Here is the problem: this doesn't only apply to the nth-children */
                   /* determined by the "s" variable, it applies to all the class.     */
                   /********************************************************************/ 

                   $('.pic_block:nth-child('+ s +'n)').css('margin-right', marginR[s]); 

                   i--;
               ;   

               s++; 
            
        ;       
  );

</script>

完整代码（包括 html/css）在这里是：http://jsfiddle.net/Pf7VV/

任何帮助将不胜感激。

谢谢。

【问题讨论】：

如果变量恰好是 '3'，你有 ('+s+'n)') 将是 :nth-child('3n)')

我相信您是说我有“额外报价”问题，但我没有看到。 $('.pic_block:nth-child('+ s +'n)') 不会变成 $('.pic_block:nth-child(3n)') 吗？如果没有，你能更具体一点吗？谢谢！

对不起，我上次评论的困惑。我玩了一点你的代码，想知道图像的数量是否会根据屏幕的大小而变化，或者它们是否只是改变大小？现在在你的代码中 $('.pic_block:nth-child('+s+'n)') 是正确的，但是 s=1 ，所以你使用的 nth-child 是 1n。也就是说，每个孩子都被选中。如果您更改该数字，那么它将选择该数量的孩子，因此 s=2 将选择每隔一个孩子 s=3 将是每隔三个孩子。

图像的数量和大小都不会改变。当每行的第一个和最后一个缩略图靠在容器上时，我想将它们均匀地对齐。剩下的就是这个想法：对所有子元素应用默认边距（1n），然后对最后一个缩略图应用“无边距”样式（:nth-child(boxesPerRow)），最后添加额外边距到一些特定的缩略图，以便清空每行的最后一个缩略图和容器之间的任何间隙。这个额外的边距可以应用于每行的第一个元素 (n)、第二个 (2n)、第三个 (3n) 等。

jsfiddle.net/Pf7VV/2 看起来中心 div 的边距与第一个和第二个的间距不同，这就是您要找的吗？

【参考方案1】：

在您的迭代变量 s 旁边似乎有一个不必要的 n！

应该是这样的：

$('.pic_block:nth-child('+s+')')

【讨论】：

感谢您的帮助。如果我只有一行但我有一个无限增长的画廊并且没有“n”，这将是正确的，这将仅适用于第一行，而我需要它在任何行上工作。根据您的建议，nth-child(3) 将应用于第三个类，而 nth-child(3n) 将应用于行内第三个元素的每个类，对吗？

我相信你是对的，我不明白这个问题 :D 你试过使用 flexbox 吗？这是一篇关于它的好文章，可能是一种更简单的方法来做你正在尝试的事情！ ：css-tricks.com/snippets/css/a-guide-to-flexbox

我会检查一下，谢谢，但我宁愿不检查。尝试从问题中学习而不是避免它们对我有好处。从我的代码可以看出，我还是个菜鸟。

你的代码对于菜鸟来说看起来很复杂，或者这就是你为什么是菜鸟的原因？我也是 javascript 的半新手：S 祝你好运！

没错！如果你知道你的代码，我相信它可以很容易地实现。无论如何，逻辑仍然存在，变量值倾向于支持我。只是动态伪类不能按原样工作的事实。我不知道为什么。

【参考方案2】：

我可以通过 jquery 使用 nth-child 进行选择，可能问题出在您的 html 或选择器中

.pic_block:nth-child(2) 不是类为pic_block 的元素的第二个子元素，而是类为pic_block 的第二个元素

看看这是否能给你一些启发http://jsfiddle.net/sfarsaci/E8vN8/1/

编辑

我认为这就是你想要的

http://jsfiddle.net/sfarsaci/2JeK2/

【讨论】：

我对nth-child的理解和你一模一样。我用 jsfiddle 编辑了我的问题。

你的小提琴中有一个语法错误：将$('.pic_block:nth-child('n+'n)').css('margin-right',marginR[n]); 更改为$('.pic_block:nth-child('+n+'n)').css('margin-right',marginR[n]); 我已经编辑了你的小提琴，添加了 jQuery 并修复了上面的错误，jsfiddle.net/sfarsaci/P3XDA 似乎正在工作

如果你在 console.log("first loop: " + n); 这样的 2 个 css 选择器之前添加一个日志行，你会发现在第一次迭代 n = 1 时，这会导致 css 应用于所有元素

这会给你想要的结果吗？我测试了不同的尺寸，它似乎工作正常jsfiddle.net/sfarsaci/yUQvs

好吧，我终于找到了你要找的东西...jsfiddle.net/sfarsaci/2JeK2

【参考方案3】：

让它工作并且代码被简化（我去掉了 2 个循环和 1 个数组）！

   <script>

    $(document).ready(function() 
    
         var containerWidth       = $('.container').width();
         var thumbWidth           = $('.pic_block').width();
         var thumbsPerLine        = Math.floor(containerWidth/thumbWidth);
         var marginTotalWidth     = (containerWidth-(thumbsPerLine*thumbWidth));
         var tempMarginR          = Math.floor(marginTotalWidth/(thumbsPerLine-1));
         var extraTotalSpaceWidth = ((marginTotalWidth/(thumbsPerLine-1)) - tempMarginR) *thumbsPerLine;
         var i                    = Math.floor(extraTotalSpaceWidth); 
         var n                    = 1;           

         $('.pic_block').css('margin-right',tempMarginR);

         while( n <= thumbsPerLine) 
               
             if(n == thumbsPerLine)
             
                 $('.pic_block:nth-child('+n+'n)').css('margin-right',0); 
             
             else
             
                 if(i>0)
                 
                     $('.pic_block:nth-child('+thumbsPerLine+'n+1)').css('margin-right','+=1');  
                     i--;
                 ;
             ;
             n++; 
                
      );

  </script>

现在，无论容器的宽度如何，画廊将始终完美地显示，在最左边和最右边的位置没有边距，并且缩略图之间的空间将尽可能均匀。

这是 jsFiddle（调整结果部分的大小并观察缩略图自动适应容器）：

http://jsfiddle.net/Baylock/ZkCgv/7/