多個列表，js操作隱藏同行中的相同屬性值
阿新 • • 發佈：2018-11-24
需求場景：
選擇一個商品，顯示所有店家的不同屬性，每個ul代表一個店家，每行的li代表一種屬性
效果如下：
| 點選顯示全部： | 點選隱藏相同項按鈕後： |
 |
 |
解決思路：
隱藏按鈕實現：
遍歷ul,在遍歷每個url裡的li
遍歷第一個ul的li時，把每個li的值新增到attr陣列作為對比的初始值，並用一個data陣列預設為true標識已重複
遍歷第二次ul起，去li的值與attr進行對比，如果不同則把data對應的座標標識為false，相同則還是為true(注意：如果已經是false，則不能再標識為true);
遍歷ul與li，根據data陣列，把相同的li的text的值賦值給新屬性value2,並把text替換為/
顯示按鈕實現：
把li標籤中value2的值賦值給text
html程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.1.9.1.min.js.js" type="text/javascript"></script> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>0</li> </ul> <ul> <li>2</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>3</li> <li>5</li> </ul> <button onclick="hideFn()">隱藏相同項</button> <button onclick="showFn()">顯示全部</button> <script> function hideFn(){ var data=[]; var attr=[]; $.each($('ul'), function(index,item){ $.each($(item).children(),function(i){ if(index==0){ attr.push($(this).text()); data.push(true); } if($(this).text()==attr[i]){ data[i]= data[i]==false?false:true; }else{ data[i]=false; } }); }); $.each($('ul'), function(index,item){ $.each($(item).children(),function(i){ if(data[i]==true){ if($(this).text()!='/'){ $(this).attr("value2",$(this).text()); } $(this).text('/'); } }); }); } function showFn(){ $.each($('ul'), function(index,item){ $.each($(item).children(),function(i){ if($(this).attr("value2")){ $(this).text($(this).attr("value2")); } }); }); } </script> </body> </html>
需注意：給li的value屬性賦值，得到的卻是0；這是需要自定義一個屬性，這樣子才能賦值成功。
原因：ul 中的li定義的value會自動轉換為int.數值，ie 瀏覽器下大於int最大值，顯示int最大值，其他瀏覽器顯示為0.而且無論你定義什麼值，都會轉int.預設為1，