Question

我希望能够计算UL中列表项的数量，然后根据li的数量设置它们的填充。

要计算我认为需要做的李的数量：

var count = $("ul.nav li").length

但我可以使用一些IF逻辑来说出类似的内容：

if count==10 then 'ul.nav li "style=padding:0 0 0 40px"'
if count==9 then 'ul.nav li "style=padding:0 0 0 50px"'
if count==8 then 'ul.nav li "style=padding:0 0 0 60px"'
etc...

我试过这个，但似乎没有用。有什么想法吗？

Answer 1

您可以使用CSS类以及您提供的逻辑以方便的方式完成此操作。

首先为你想要的每个长度写一个CSS类：

.li-count-4
{
    padding: 0 0 0 40px;
    /*any other styles you want*/
}

.li-count-3
{
    padding: 0 0 0 30px;
    /*any other styles you want*/
}

然后你写了javascript部分

var lis = $("ul.nav li");
var count = $("ul.nav li").length;

switch (count)
{
    case 4:
        lis.addClass('.li-count-4');
        break;
    case 3:
        lis.addClass('.li-count-3');
        break;
    //other cases
}

祝你好运。

Answer 2

如果我真的发现了序列......

$("ul.nav li").css( "padding", "0 0 0 "+(14-count)*10+"px" );

Answer 3

使用jQuery执行此操作的正确方法是：

if (count == 10)
  pad = 40;
else if(count == 9)
  pad = 50;

// The rest .....
// and finally
$('ul.nav li').css('padding', '0 0 0'+ pad + 'px');

Answer 4

尝试

var elem = $("ul.nav li")
, styles = {
    7: 60,
    8: 50,
    9: 40
};
elem.each(function(i) {
    if (styles[i] !== undefined) {
      elem.css("padding", "0 0 0 " + styles[i] + "px")
    }
});

var elem = $("ul.nav li")
, styles = {
    7: 60,
    8: 50,
    9: 40
};
elem.each(function(i) {
    if (styles[i] !== undefined) {
      elem.css("padding", "0 0 0 " + styles[i] + "px")
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

计算列表项的数量，然后根据数量添加样式

4 个答案: