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

Question

我是相对较新的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中，有没有一种方法可以将该函数分别应用于多个容器类？

谢谢！

尼尔。

Answer 1

 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> 

尝试使用可以实现的每个功能！

Answer 2

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);

Answer 3

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

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');
        }
    });
}

Answer 4

请尝试这个我认为这应该工作

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();
    })

Answer 5

尝试使用CSS / flexbox可以轻松实现，请参见此处 。

例如：

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来操纵样式是一种舞弊行为，从而导致代码质量差并且难以消除问题。

Answer 6

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

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

您的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 。 它有4个孩子。

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

现在您可以问我为什么？

好的，让我们解释一下。 $(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);