Question

我正在制作一个自适应主题，而且我不知道一个人可以通过管理员在页脚部分中添加多少个小部件。所以我试图使用jQuery来检测有多少div.widget，并在父div中添加一个类来查找有多少div.widget。所以我可以调整宽度。我不会假装我理解jQuery，我不会，但我试试。我也对如何处理这个问题提出了其他建议。

无论如何，我无法通过以下方式开展工作......

HTML：

<div id="main-footer-section">
    <div class="widget">Widget One</div>
    <div class="widget">Widget Two</div>
</div>

CSS：

.widget { background: #ccc; color: #fff; font: 1em sans-serif; margin: 5px; padding: 5%; text-align: center; }

#main-footer-section.widget-count-2 .widget {
    width: 50%;
}
#main-footer-section.widget-count-3 .widget {
    width: 33%;
}
#main-footer-section.widget-count-4 .widget {
    width: 25%;
}

jQuery的：

$('#main-footer-section').each(function() 
    {
        if $(this).children('.widget').length = 2) {
            $(this).find('#main-footer-section').addClass('widget-count-2');
            }
        if $(this).children('.widget').length = 3) {
            $(this).find('#main-footer-section').addClass('widget-count-3');
            }
        if $(this).children('.widget').length = 4) {
            $(this).find('#main-footer-section').addClass('widget-count-4');
            }
    });

http://jsfiddle.net/epwmzrkb/1/

Answer 1

您的脚本中的主要问题是语法错误，#main-footer-section不是this的后代，它是this元素，因此$(this).find('#main-footer-section')不会什么都归还

$('#main-footer-section').addClass(function(i, clazz) {
  var len = $(this).children('.widget').length;
  return len > 1 && len < 5 ? 'widget-count-' + len : '';
});

.widget {
  background: #ccc;
  color: #fff;
  font: 1em sans-serif;
  margin: 5px;
  padding: 5%;
  text-align: center;
}
#main-footer-section.widget-count-2 .widget {
  /*this will not work because of the margin given to .widget*/
  width: 50%;
  color: red;
}
#main-footer-section.widget-count-3 .widget {
  width: 33%;
  color: green;
}
#main-footer-section.widget-count-4 .widget {
  width: 25%;
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main-footer-section" class="x">
  <div class="widget">Widget One</div>
  <div class="widget">Widget Two</div>
</div>

Answer 2

$(function(){
    var $main = $("#main-footer-section").addClass( function(){
      return "widget-count-" + $(this).children('.widget').length;
    });
});

http://jsfiddle.net/maxcal/86hsajd8/2/

jQuery：检测元素数量，然后应用类

2 个答案: