Question

我在foreach循环中有<li class="level1> <ul class="level1"> <li class="level2">。我必须在超级菜单中加载更多链接。

从上面的图片中，我想在所有li代码中加载更多链接，如果有超过5 li，

我把jQuery放在<script type="text/javascript"> jQuery(document).ready(function () { size_li = jQuery(".level1 li").size(); x=5; jQuery('.level1 li":lt('+x+')').show(); jQuery('#loadMore').click(function () { x= (x+5 <= size_li) ? x+5 : size_li; jQuery('.level1 li":lt('+x+')').show(); }); }); </script>之下，但它不起作用。任何人都可以帮助我吗？

css

还添加<style type="text/css"> .level1 li{ display:none; } </style>

-(void)scheduleCal{
    float monthlyPayment = 0.0; //monthly Payment
    float loanAmount = 100000; //Loan Amount
    int years = 30;
    float intRate = 6;
    float i = intRate / 1200;
    int n = years * 12;// 360
    float rPower = pow(1+i, n);

    float mPayment = loanAmount*((i*(pow((1+i), n)))/((pow(1+i, n))-1));

    monthlyPayment = loanAmount * i * rPower / (rPower -1);

    NSLog(@"Monthly Payment:%0.2f %f",mPayment,round(monthlyPayment));

    float tempLoanAmount = loanAmount;

    self.array = [[NSMutableArray alloc] init];

    for (int r = 1; r <= n; r++) {
        float interestPayment = tempLoanAmount *i;
        double principalPayment = mPayment - interestPayment;

        tempLoanAmount -= principalPayment;

        NSDictionary *dic = @{@"sno":[NSString stringWithFormat:@"%d",r],@"principal": [NSString stringWithFormat:@"%0.2f",principalPayment],@"interest":[NSString stringWithFormat:@"%0.2f",interestPayment],@"balance":[NSString stringWithFormat:@"%0.2f",tempLoanAmount]};

        [self.array addObject:dic];
        dic = nil;
    }

    NSLog(@"Array:%@ %ld",self.array,(unsigned long)self.array.count);
}

获取以下输出

Answer 1

基于.size() manual

.size（）版本已弃用：1.8，已删除：3.0。所以使用.length 相反 -

但您可以将代码更改为此（更好的方法）： -

jQuery(document).ready(function () {
    jQuery('ul.level1').each(function(){
      if(jQuery(this).children('li').length>5){
        jQuery(this).children('li:lt(5)').show();
        jQuery(this).append('<button class="loadMore">LoadMore</button>');
      }
    });   
    jQuery('ul.level1').on("click",'.loadMore',function (){
        jQuery(this).parent('.level1').children('li:gt(4)').show(); // use gt instead of lt
        jQuery(this).removeClass('loadMore').addClass('loadLess').text('LoadLess'); 
    });
    jQuery('ul.level1').on("click",'.loadLess',function () {
        jQuery(this).parent('.level1').children('li:gt(4)').hide(); // use gt instead of lt
        jQuery(this).removeClass('loadLess').addClass('loadMore').text('LoadMore'); 
    });
});

工作示例代码： -

jQuery(document).ready(function () {
    jQuery('ul.level1').each(function(){
      if(jQuery(this).children('li').length>5){
        jQuery(this).children('li:lt(5)').show();
        jQuery(this).append('<button class="loadMore">LoadMore</button>');
      }
    });   
    jQuery('ul.level1').on("click",'.loadMore',function (){
        jQuery(this).parent('.level1').children('li:gt(4)').show(); // use gt instead of lt
        jQuery(this).removeClass('loadMore').addClass('loadLess').text('LoadLess'); 
    });
    jQuery('ul.level1').on("click",'.loadLess',function () {
        jQuery(this).parent('.level1').children('li:gt(4)').hide(); // use gt instead of lt
        jQuery(this).removeClass('loadLess').addClass('loadMore').text('LoadMore'); 
    });
});

.level1{
float:left;
width:25%;
}
.level1 li{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="float:left:width:100%">
  <ul class="level1">
    <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>
   <ul class="level1">
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
  </ul>
  <ul class="level1">
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
  </ul>
</div>

看到您的网站HTML后，请使用以下代码替换您的代码： -

jQuery(document).ready(function () {
    jQuery('ul.level1').each(function(){
      if(jQuery(this).children('li').length){
        jQuery(this).children('li:lt(5)').show();
        jQuery(this).append('<button class="loadMore">LoadMore</button>');
      }
    });   
    jQuery('.loadMore').click(function () {
        jQuery(this).parent('ul.level1').children('li:gt(5)').show(); // use gt instead of lt
    });
});

使用jQuery为<li> <ul> <li>标记加载更多功能

1 个答案: