jQuery。将功能分别应用于每个div

时间：2018-08-07 09:16:42

标签： javascript jquery html

我是相对较新的Jquery。以及整个JS。
我已经责成自己构建实际上是一个基本框架构建器的东西。

我有一小段Jquery，它计算容器中子div（列）的数量，然后根据存在的子项设置列的宽度。

HTML 

<div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
</div>

jQuery 

function builder(){
var contCount = $('div.container').children().length;

if (contCount == 1) {
    $('div.container').children().css('width', '100%');
}
else if (contCount == 2) {
    $('div.container').children().css('width', '50%');
}
else if (contCount == 3) {
    $('div.container').children().css('width', '33.33%');
}
else if (contCount == 4) {
    $('div.container').children().css('width', '25%');
}
}
$(document).ready(builder);

问题：
当我有一个容器时，上面的方法有效，但是如果我有多个容器，它就会中断。我知道为什么会破裂，但不知道如何解决。

问题：
在Jquery / JS中，有一种方法可以将该函数分别应用于多个容器类吗？

谢谢！

尼尔。

6 个答案:

答案 0 :(得分：0)

function builder(){
$('div.container').each(function(){
  
  var contCount = $(this).children().length;

  if (contCount == 1) {
      $(this).children().css('width', '100%');
  }
  else if (contCount == 2) {
      $(this).children().css('width', '50%');
  }
  else if (contCount == 3) {
      $(this).children().css('width', '33.33%');
  }
  else if (contCount == 4) {
      $(this).children().css('width', '25%');
  }
 
});
}
$(document).ready(builder);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
</div>

<div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>    
    <div  class="col">test</div>    
</div>

<div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>    
</div>

<div class="container">
    <div  class="col">test</div>    
</div>

尝试使用可以实现的所有功能！

答案 1 :(得分：0)

jQuery 

function builder(){
    $('div.container').each(function(){
        var $children = $(this).children();
        var contCount = $children.length;

        if (contCount == 1) {
            $children.css('background-color', 'red');
        }
        else if (contCount == 2) {  
            $children.css('background-color', 'red');
        }
        else if (contCount == 3) {
            $children.css('background-color', 'green');
        }
        else if (contCount == 4) {
            $children.css('background-color', 'red');
        }
    })
}
$(document).ready(builder);

答案 2 :(得分：0)

第var contCount = $('div.container').children().length;行计算所有 'div.container'个选择器匹配元素的子代，您想隔离容器并询问每个容器他有多少个子代。 / p> 

function builder(){
    $('div.container').each(function() {
        var $children = $(this).children();
        var contCount = $children.length;

        if (contCount == 1) {
            $children.css('background-color', 'red');
        }
        else if (contCount == 2) {  
            $children.css('background-color', 'red');
        }
        else if (contCount == 3) {
            $children.css('background-color', 'green');
        }
        else if (contCount == 4) {
            $children.css('background-color', 'red');
        }
    });
}

答案 3 :(得分：0)

请尝试一下，我认为这应该可行

jQuery(function(){
        jQuery.fn.equalWidth = function(){              
                jQuery(this).each(function() {                  
                    var findLenght = jQuery(this).find('.col').length,
                        width = 100/findLenght;
                    jQuery(this).find('.col').css({'width': width+'%'});
                });             
        }
        jQuery('.container').equalWidth();
    })

答案 4 :(得分：0)

您可以尝试使用CSS / flexbox轻松实现目标 参见here。

例如：

CSS：

.container
{   
    display: flex;
}

.col
{
    flex: 1 1 auto;
}

HTML：

  <div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
  </div>

  <div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>
  </div>

  <div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
  </div>

实际上，使用js而不是CSS来操纵样式是一种弊端，导致代码质量差并且难以消除问题。

答案 5 :(得分：0)

让我们解释为什么您得不到预期的结果。深刻理解问题总是很重要的。它可以帮助您解决其他类似问题。

我喜欢使用您的代码参考。

您的HTML代码：

<div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
</div>

您的JS代码：

function builder(){
    var contCount = $('div.container').children().length;

    if (contCount == 1) {
        $('div.container').children().css('width', '100%');
    }
    else if (contCount == 2) {
        $('div.container').children().css('width', '50%');
    }
    else if (contCount == 3) {
        $('div.container').children().css('width', '33.33%');
    }
    else if (contCount == 4) {
        $('div.container').children().css('width', '25%');
    }
}
$(document).ready(builder);

让我们深入。

首先，您有一个父类.container。它有四个孩子。

在这种情况下，因为父代只有一个，所以您的代码绝对可以生成结果。问题是当它有多个父对象时提交。

现在您可以问我为什么？

好的，让我们解释一下。 $(document).ready(builder);在这一行中，您将调用builder函数。调用它时，首先执行var contCount = $('div.container').children().length;行。

结果显然是4。因为孩子的数量是4。

假设您有两个.container类。每个容器的孩子数不同。

<div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
</div>

<div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>
</div>

在这种情况下，调用您的builder函数时，contCount的变量结果将为2。

困惑！

假设：

var foo = 4;
var foo = 2;

console.log(foo) // 2

这里发生了同样的事情。第一.container类孩子的数目是4，第二.container类孩子的数目是2。  因此contCount将是2。这是主要问题。

我现在就调试它。但我想分享我对这个问题的解决方案。

HTML：

<div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
  </div>

  <div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>
  </div>

  <div class="container">
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
    <div  class="col">test</div>
  </div>

JS：

const builder = function(){
$('div.container').each(function(index,item){
const length = $(item).children('.col').length;
const gridNumber = 100/length;

if(length > 0) {
    $(item).children().css('width', `${gridNumber}%`);
}

})

}


$(document).ready(builder);
相关问题
最新问题