2016-08-14 2 views
1

jsFiddleに関連するテーブルHTMLがあります。prevAllを使用して、キーワードを含む表のすべてのセクションを選択します。

特定のキーワードが含まれている場合、テーブルのセクションを強調表示または削除するためにjQueryを使用します。今

<table> 
    <tr class="mark"></tr> 
    <tr><td>apple</td></tr> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
    <tr><td>4</td></tr> 
    <tr><td>5</td></tr> 

    <tr class="mark"></tr> 
    <tr><td>pear</td></tr> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
    <tr><td>4</td></tr> 
    <tr><td>5</td></tr> 

    <tr class="mark"></tr> 
    <tr><td>apple</td></tr> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
    <tr><td>4</td></tr> 
    <tr><td>5</td></tr> 

    <tr class="mark"></tr> 
    <tr><td>pear</td></tr> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
    <tr><td>4</td></tr> 
    <tr><td>5</td></tr> 

    <tr class="mark"></tr> 
    <tr><td>apple</td></tr> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
    <tr><td>4</td></tr> 
    <tr><td>5</td></tr> 

    <tr class="mark"></tr> 
    <tr><td>pear</td></tr> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
    <tr><td>4</td></tr> 
    <tr><td>5</td></tr> 

    <tr class="mark"></tr> 
    <tr><td>apple</td></tr> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
    <tr><td>4</td></tr> 
    <tr><td>5</td></tr> 
</table> 

、私は私が( "梨" を含む===で区切られたすべてのセクションを、ハイライト)何をしたいのかを達成するために

$("td:contains('pear')").parent().prev().nextUntil(".mark").css("background-color", "red"); 

を使用することができます。しかし、デリミタの行が検索しているテキストの直前にない場合は、どうすればprevAllでこれを行うことができますか?私は$("td:contains('pear')").parent().prevAll(".mark:first").nextUntil(".mark").css("background-color", "red");を試してみましたが、1つのセクションだけが強調表示されています。私は、prevAll()のようなアクションを要素のリストにマップしたい状況について、jQueryがどのように扱うかについての理解の重要な部分が欠落していると思います。

不良な表のレイアウトは無視してください。これは、私はこれは動作するはずですT_T

+0

は多分[mark.js](https://markjs.io/を見て) – dude

答えて

1

で動作するように持っているものだけである:

$("td:contains('pear')").parent().each(function() { 
    $(this).prevAll(".mark:first").nextUntil(".mark").css("background-color", "red"); 
}); 

参照:https://jsfiddle.net/aszepeshazi/9czm7g3y/2/

+0

ああ、これはまさに私が望んでいたものです。私はjQueryを初めて使っていて、 'each()'が存在しているかどうかは分かりませんでした。ありがとうございました! –

+0

それはあなたのために働いてうれしい!乾杯。 –

関連する問題