2つの要素ごとにターゲットを設定：Javascript/jQuery

bugfix> javascript > 投稿 2020-08-22 19:22

私は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ループを作成したかったのですが、これを行う良い方法が考えられませんでした。

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

javascript

jquery

list

回答 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;
    }
});

bugfix

2つの要素ごとにターゲットを設定：Javascript/jQuery

javascript

jquery

list

関連記事