簡體   English   中英

如何使用jquery基於子類名隱藏表行?

[英]How to hide table rows based on child class name using jquery?

我有很多行,我想隱藏一些沒有特定類的tr。

例:

<tr id="game-22590" class="game">
    <td class="pos left-edge">
        <div>2</div>
    </td>
    <td class="cost">
        <input class="dollars-paid uncorrected" type="text" value="19,99" tabindex="4">
    </td>
</tr>
<tr id="game-22591" class="game">
    <td class="pos left-edge">
        <div>3</div>
    </td>
    <td class="cost">
        <input class="dollars-paid" type="text" value="23,99" tabindex="4">
    </td>
</tr>

td.cost有一個或兩個類的輸入。 我想隱藏那些沒有未uncorrected類的行。

使用.filter()選擇行有uncorrected類。

$("tr.game").filter(function(){
    return $(this).find("input.uncorrected").length == 0;
}).hide();

 $("tr.game").filter(function(){ return $(this).find("input.uncorrected").length == 0; }).hide(); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr id="game-22590" class="game"> <td class="pos left-edge"> <div>2</div> </td> <td class="cost"> <input class="dollars-paid uncorrected" type="text" value="19,99" tabindex="4"> </td> </tr> <tr id="game-22591" class="game"> <td class="pos left-edge"> <div>3</div> </td> <td class="cost"> <input class="dollars-paid" type="text" value="23,99" tabindex="4"> </td> </tr> </table> 

你可以使用nearest()方法jQuery來做...請檢查這個解決方案

 $(".dollars-paid").not(".uncorrected").closest(".game").hide(); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table> <tr id="game-22590" class="game"> <td class="pos left-edge"> <div>2</div> </td> <td class="cost"> <input class="dollars-paid uncorrected" type="text" value="19,99" tabindex="4"> </td> </tr> <tr id="game-22591" class="game"> <td class="pos left-edge"> <div>3</div> </td> <td class="cost"> <input class="dollars-paid" type="text" value="23,99" tabindex="4"> </td> </tr> <tr id="game-22592" class="game"> <td class="pos left-edge"> <div>3</div> </td> <td class="cost"> <input class="dollars-paid" type="text" value="25,99" tabindex="4"> </td> </tr> </table> 

$("table tr.game").each(function(){
    var self=$(this);
    if(!self.find("input").hasClass("uncorrected")){
        self.hide();
    }
});

工作演示

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM