如何隱藏所有具有特定屬性集的元素？

我有一系列的項目通過ajax請求從php文檔插入到我的html文檔中。返回的數據由一組帶有自定義屬性的div元素組成，以便我能夠判斷哪些div元素屬於已返回的項目類別。我希望能夠點擊類別名稱並隱藏所有具有自定義屬性（設置爲類別名稱）的元素。如何隱藏所有具有特定屬性集的元素？

採樣返回

<div class="row"> 
    <div class="category" categoryID="category_1"> 
     category_1 
     <div categoryID="category_1">item 1</div> 
     <div categoryID="category_1">item 2</div> 
     <div categoryID="category_1">item 3</div> 
    </div> 
    <div class="category" categoryID="category_2"> 
     category_2 
     <div categoryID="category_2">item 1</div> 
     <div categoryID="category_2">item 2</div> 
     <div categoryID="category_2">item 3</div> 
    </div> 
    <div class="category" categoryID="category_3"> 
     category_3 
     <div categoryID="category_3">item 1</div> 
     <div categoryID="category_3">item 2</div> 
     <div categoryID="category_3">item 3</div> 
    </div> 
</div> 

<div class="row"> 
    <div class="category" categoryID="category_1"> 
     category_1 
     <div categoryID="category_1">item 1</div> 
     <div categoryID="category_1">item 2</div> 
     <div categoryID="category_1">item 3</div> 
    </div> 
    <div class="category" categoryID="category_2"> 
     category_2 
     <div categoryID="category_2">item 1</div> 
     <div categoryID="category_2">item 2</div> 
     <div categoryID="category_2">item 3</div> 
    </div> 
    <div class="category" categoryID="category_3"> 
     category_3 
     <div categoryID="category_3">item 1</div> 
     <div categoryID="category_3">item 2</div> 
     <div categoryID="category_3">item 3</div> 
    </div> 
</div>

我使用jQuery來處理大部分的JavaScript函數很自然我會動態添加到DOM中的數據時，使用類似下面的代碼是。

$(".skillCategory").live({ 
     mouseenter: 
      function(){ 
       $(this).css('background-color', 'white'); 
      }, 
     mouseleave: 
      function(){ 
       $(this).css('background-color', '#393939'); 
      } 
     }); 
    $(".skillCategory").live('click',function(){ 
     var title = $(".skillCategory").attr("categoryID"); 

     }); 
});

我試圖能夠隱藏一個類別和屬於它的所有項目，由「categoryID」屬性確定。

謝謝你的時間和協助。

來源

2011-07-27 Wes

我找不到skillCategory類是什麼。 – SadullahCeran

如果我正確理解你的問題，這樣的事情應該工作：

$(".category").live('click',function(){ 
     var category = $(this).attr("categoryID"); 
     $("[categoryID=" + category + "]").not('.category').hide(); 
    });

來源

2011-07-27 22:12:56 Emil

ITYM'not（'。category'）'，對不對？ –

在你有$（「。category」）的第一部分中，.category通過使用最後一段代碼被發現，如上圖所示，現在在$（「。skillCategory」）之下，live（'click'，函數（）{ var title = $（「。skillCategory」）。attr（「categoryID」）; }）;'問題是當我嘗試使用標題變量代替你的.category時，它沒有出現上班。我如何動態地做到這一點？ – Wes

@wes，你可以發佈完整的html，我會修改代碼。你的例子不包括.skillCategory，我不得不使用。類別 – Emil

嘗試使用jQuery屬性選擇：http://api.jquery.com/attribute-equals-selector/

你應該用別的東西結合起來，以避免隱藏主DIV，像「：不是（.skillCategory）」或類似的。

來源

2011-07-27 22:10:35

我在選擇動態內容中的項目時沒有問題，嘗試隔離「categoryID」然後隱藏具有該屬性的所有元素時出現問題。 – Wes

這是通過使用屬性選擇器完成的，該選擇器將查找具有給定類別ID的所有其他元素，以便您可以隱藏它們，就像Emil在答案中所做的一樣。 –

這要高度重視爲你做它：

http://jsfiddle.net/J6PRM/

希望它幫助。

來源

2011-07-27 22:15:45 Sparkup

這將是偉大的，但我的問題是當內容是動態添加，你必須使用。生活。我會看看我是否可以修改你在那裏的內容，看看我能否實現它。感謝您的建議。 – Wes

你可以格式化你的HTML使用新的「數據屬性」符號：

<div class="category" data-categoryID="category_3">

然後，你可以這樣做：

$(".category").click(function() { 
    var ctx = $(this); 
    $(".category").each(function(item) { 
    if($(this).data("categoryID") != ctx.data("categoryID") { 
     $(this).hide(); 
    } 
    }); 
});

來源

2011-07-27 22:17:50 stef

大部分瀏覽器都支持這個嗎？ – Wes

'$（「。skillCategory」）。live（'click'，function（）{ var ctx = $（this）; console.log（ctx）; $（「。skillCategory」）。each（function （item）{console.log（「first：」）; console.log（$（this）.data（「categoryID」））; console.log（「Seccond：」）; console.log（ctx如果（$（this）.data（「categoryID」）！= ctx.data（「categoryID」））{ $（this）.hide（）; } }） ; }）;'第一個日誌按預期顯示所有不同的類別。其他人產生未定義的變量。 – Wes

如何隱藏所有具有特定屬性集的元素？

回答

相關問題