jQueryの相対行に影響を与える方法

Question

これは分かりません。

私は、私が取り組んでいるサイトで遭遇した問題に対する解決策に取り組んできました。

基本的に、ハウスネームのリストがあります。これらのハウスネームのそれぞれには、それを表す高度なカスタムフィールドを介して割り当てられた色があります。 PHPを使用して、私は例えば、その関連する色を含む四角形を表示するために、このフィールドを使用したスタイルのリストを生成するために管理している：

.HouseOne { background-color: #333333; } 

.HouseTwo { background-color: #444444; } 

これは私が編集できるページテンプレートの領域に対して正常に動作します自分自身のマークアップですが、私はWordPressプラグインで自動的に生成されるテーブルに色のブロックを挿入する作業をしています。私の考えは次のようなスクリプトを書いてください：

適切なテーブルセルからHouse Nameを取得します。

ハウス名の空白部分をすべて削除します。

セルの先頭に「<span class="HOUSENAME colourblock"></span>」を挿入します。

これまでは、HTMLを挿入するのではなくクラスを追加するスクリプトを作成しましたが、各セルからハウス名を取得してクラスを追加する代わりに、最初のセルクラスをすべてのセルに追加します。私は各家の名前を取得し、それを関連するセルに追加する必要があります。私は、私が思いついたメソッドのクラス名としてどのように変数を追加するのか分かりませんでしたので、HTMLを前もって動作させるのに問題がありました。クラスを追加するだけでスクリプトをテストできました。 、すべてのヘルプは素晴らしいだろう

var House = jQuery(".single.single-developmenttype tr td.column-2").children("td.column-2").html(); 
jQuery(".single.single-developmenttype tr td.column-2").addClass(House); 

事前のおかげで：ここで

は私が思い付いたものです。

Answer 1

このデモコードを試してみてください。それはそれはあなたがjQueryの

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
<th>test1</th> 
<th>test2</th> 
<th>test3</th> 
<tr> 
    <td>Test1-1</td> 
    <td>Test1-2</td> 
    <td>Test2-3</td> 
</tr> 
<tr> 
    <td>Test2-1</td> 
    <td>Test2-2</td> 
    <td>Test2-3</td> 
</tr> 
<tr> 
    <td>Test3-1</td> 
    <td>Test3-2</td> 
    <td>Test3-3</td> 
</tr> 
</table> 

<script> 
i = 0; 
$("tr").each(function() { 
    i = i + 1; 
    $(this).addClass("house-"+i); 
}); 
</script> 

を使用して動的なクラスを追加したい場合は、テスト

のために、このデモコードを使用することができます

house-first 
house-second 
house-third 

のような動的なクラスを作成しますあなた

<?php $array = array('first','second','third'); 
foreach ($array as $value) { 
echo '<div class="house-'.$value.'">'.$value.'</div>'; 
} ?> 

役立つことを願っています

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table id="mytable"> 
    <th>test1</th> 
    <th>test2</th> 
    <th>test3</th> 
    <tr> 
     <td>Test1-1</td> 
     <td>Test1-2</td> 
     <td>Test2-3</td> 
    </tr> 
    <tr> 
     <td>Test1-1</td> 
     <td>Test1-2</td> 
     <td>Test2-3</td> 
    </tr> 

</table> 
<span>First1</span> 
<span>First2</span> 
<span>First3</span> 
<span>First4</span> 
<span>First5</span> 
<span>First6</span> 

<script> 
    total_length = $("#mytable tr td").length; 
    count_number = -1; 
    cellText = ''; 
    $('#mytable td').each(function() { 
     if (count_number < total_length) { 
      count_number = count_number + 1; 
      cellText = $(this).text(); 
      $("span:eq(" + count_number + ")").removeClass(); 
      $("span:eq(" + count_number + ")").addClass("house-" + cellText); 
     } 

    }); 
</script>