使用eq（）和for（）循環隱藏特定元素？

Question

我試圖隱藏的輸入框，如果前面的輸入框中的值是相同的如

City  Id Name 

NY  1  James 
NY  2  John 
TOKYO  3  Jane 
TOKYO  4  June 

我想隱藏第二NY和第二TOKYO（注意：只是城市，ID和名稱應保持）。

我使用下面的jQuery腳本：

<script> 

$(function(){ 

var tr_no = $('.city').length; 

for(i=1; i<=tr_no; i++) { 

    if($(".city:eq("+i+")").val() == $(".city:eq("+i+++")").val()){ 

     $(".city:eq("+i+1+")").css({'display':'none'}); 

     } 

    } 


}); 

</script> 

這是行不通的。 Firebug COnsole不會返回任何錯誤。謝謝，任何關於如何繼續這jQuery的幫助將不勝感激。

Answer 1

有組織輸出：http://jsfiddle.net/mattblancarte/mnWH2/10/

var tr = $('tr'), 
    duplicates = []; 

tr.each(function(k,v){ 
    var elem = $(v), 
     child = elem.children().slice(0,1), 
     city = child.text(); 

    if($.inArray(city, duplicates) > 0){ 
    child.empty();  
    } else { 
    duplicates.push(city); 
    } 
}); 

散亂輸出：http://jsfiddle.net/mattblancarte/mnWH2/8/

$('tr').each(function(k,v){ 
    var elem = $(v), 
     prev = elem.prev().children().slice(0,1).text(), 
     child = elem.children().slice(0,1), 
     city = child.text(); 

    if(prev === city){ 
    child.empty();  
    } 
}); 

注::我不認爲你想使用顯示：無;.這可能會改變桌子周圍......也許可見性：隱藏將是一個更好的選擇。我只是清空細胞。

Answer 2

我們只能假設你在用html表格編碼的數據上工作。 如果是比它可能是你有字符串作爲表格單元格的內容：

<td class="city">NY</td> 

使用的表格單元格的CSS規則如預期並不總是工作，表是有些特殊。你將不得不包裹內容中的每一個容器，也許是這樣的：如果

<td><span class="city">NY</span></td> 

不知道這其實是你的問題雖然，因爲你的問題是有些模糊。

Answer 3

您可以使用:contains jQuery選擇器選擇包含指定文本的所有元素。

試試這個代碼：

 // Storing the unique city names in an array 
     var arrCity = {}; 
     $('table tr:gt(0) td:first-child').each(function() { 
      arrCity[$(this).text()] = $(this).text(); 
     }); 

     // Removing the second city name for each cities 
     $.each(arrCity, function (key, value) { 
      $('table tr td:contains("' + value + '"):eq(1)').html(''); 
     }); 

演示：http://jsfiddle.net/codef0rmer/mnWH2/

Answer 4

像這樣的東西應該有一個空的空間代替重複的城市名稱：http://jsfiddle.net/S2UNH/7/

var prev = ""; // cache previous value 
$('#data').find("td.city").each(function() { 
    var val = $(this).text().trim(); 
    if (val == prev) { // same value, blank it 
     $(this).text(" "); 
    } else {   // new value, store it 
     prev = val; 
    } 
}); 

如何從一些這方面的不同到目前爲止發佈的其他方法：

• 該列表是否需要提前知道城市
• 只要城市名稱位於不同的城市之前，城市名就可以重新出現在列表的下方。例如，請參閱http://jsfiddle.net/S2UNH/8/。如果紐約的所有後者條目都隱藏起來，無論它出現在哪裏，那麼觀衆可能會錯誤地將它誤認爲是TOKYO的條目。

如果你想隱藏重複值，而不是取代他們，那麼你就需要在另一個元素中把你的文字，因爲隱藏<td>標籤會惹你的佈局。

實現此目的有多種方式;這裏有一個方法：http://jsfiddle.net/S2UNH/9/

Answer 5

如果這是你的數據結構：

<table> 
    <thead> 
        <tr> 
            <th class="city"><span>City</span></th> 
            <th class="id"  ><span>Id  </span></th> 
            <th class="name"><span>Name</span></th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td class="city"><span>NY</span></td> 
            <td class="id"  ><span>1</span></td> 
            <td class="name"><span>James</span></td> 
        </tr> 
        <tr> 
            <td class="city"><span>NY</span></td>    
            <td class="id"  ><span>2</span></td>      
            <td class="name"><span>John</span></td> 
        </tr> 
        <tr> 
            <td class="city"><span>TOKYO</span></td>         
            <td class="id"  ><span>3</span></td>      
            <td class="name"><span>Jane</span></td> 
        </tr> 
        <tr> 
            <td class="city"><span>TOKYO</span></td>      
            <td class="id"  ><span>4</span></td>      
            <td class="name"><span>June</span></td> 
        </tr> 
        </tr> 
    </tbody> 
</table> 
​ 

然後此代碼的工作：

var tr_no = $('.city').length; 
for(i=0; i<tr_no; i++)  { 
    if($(".city span").eq(i).text() == $(".city span").eq(i+1).text()){ 
        $(".city span").eq(i+1).css({'display':'none'}); 
    } 
} 

===

我編寫的小提琴手的答案，因爲它更容易驗證：

http://jsfiddle.net/ewC6q/10/

Answer 6

我assumeed每Tr有一類 '城市'，

$(function() { 
    var prevCity = '' 
    $('.city').each(function(){ 
     currCity = $(this).find('td:first').html().trim(); 
     if(currCity === prevCity) 
     { 
      $(this).css('display', 'none'); 
     } 
     prevCity = currCity;  
    }); 
});