jQuery 和变量 nth-child 不起作用

Question

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

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

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

我检查了变量，它们都正常，但无论出于何种原因，脚本末尾的“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/

任何帮助将不胜感激。

谢谢。

Answer 1

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

应该是这样的：

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

Answer 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/

Answer 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/