bugfix> javascript > 投稿

私はjsのコードに苦労しています。

私はテーブルを持っているので、それを繰り返して、3番目と4番目などではなく、最初の2つのtrに対して何かを実行したいと思います。

2つの要素ごとに1つのクラスを与えたいとしましょう。 このような:

<li></li> <!-- class1-->
<li></li> <!-- class1-->
<li></li> <!-- class2-->
<li></li> <!-- class2-->
<li></li> <!-- class3-->
<li></li> <!-- class3-->
<li></li> <!-- class4-->
<li></li> <!-- class4-->
etc ..

forループについて考えていましたが、2つごとにターゲットを設定する方法がわかりません。また、「スライス」を見つけましたが、他の2つのアイテムからアイテムを選択できるようです。 スライスの開始値と終了値を変更するwhileループを作成したかったのですが、これを行う良い方法が考えられませんでした。

これには何かありますか?

回答 4 件
  • li をループできます  要素と index を使用  および剰余演算子 %  すべての nth を取得する  要素と何かをします。

    let c = 1;
    $("li").each(function(i) {
      $(this).attr('class', 'class' + c).text(c)
      if ((i - 1) % 2 == 0) c++;
    })
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    
    

  • あなたが何をしているのか正確にはわからないが、おそらくこのようなループが助けになるかもしれない。

    for(let i=0; i<list.length; i+=2){
        doSomething(list[i], getSpecialParam(i/2));
        doSomething(list[i+1], getSpecialParam(i/2));
    }
    
    

    実行を大きくする場合、ループを入れ子にすることができます

    for(let i=0; i<list.length; i+=runLength){
        for(let j=0; j<runLength; j+=1){
            doSomething(list[i+j], getSpecialParam(i/runLength));
        }
    }
    
    

    const list = $('li');
    const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const runLength = 2;
    for(let i=0; i<list.length; i+=runLength){
      for(let j=0; j<runLength; j++){
        list[i+j].textContent = letters[(i/runLength)%letters.length];
      }
    }
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    <ul>
    
    

  • 構成に基づいた要素の分割が必要な場合は、length = 2または任意のものを使用します。目的の長さのサブ配列を取得します

    var items=$("li"),index=1,length=2;
     while(items.length) {    
        $(items.splice(0,length)).each(function() {
           $(this).addClass('class'+index).text('class'+index);      
      });
       index+=1;
    };
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    
    

  • table にクラスを追加できます   tr  jQueryを使用して要素を反復処理することで要素を作成します

    var i = 1;
    var sumupi = 0;
    jQuery("table tr").each(function(){
        jQuery(this).addClass('class-' + i);
        if (sumupi == 1) {
            i++;
            sumupi = 0;
        }
        else {
            sumupi = 1;
        }
    });
    
    

あなたの答え