通過jQuery動態隱藏ID

Question

我有三個3格

<div id= "product_1"></div>
<div id= "product_2"></div>
<div id= "product_3"></div>
<div id= "product_4"></div>
<div id= "product_5"></div>

我正在動態更改ID

var hotelCode = "CUNMXHIDD,CUNMXMAYA,CUNMXDSAN"
var splittedHotelCode = hotelCode.toString().split(',');
jQuery.each(splittedHotelCode, function(i, hotelCode) {
 $("#product_"+ i).attr("id","product_"+ hotelCode);
});

此后，我想隱藏未索引product_4和product_5的div

現在DOM是

<div id= "product_CUNMXHIDD"></div>
<div id= "product_CUNMXMAYA"></div>
<div id= "product_CUNMXDSAN"></div>
<div id= "product_4"></div>
<div id= "product_5"></div>

我不想硬編碼。 我可以用Jquery隱藏它們嗎？

Answer 1

您可以使用數組的length和slice方法。

$('div[id^=product]').slice(splittedHotelCode.length).hide();

Answer 2

1. 跟蹤索引以保留最后一個索引
2. 使用：gt（）選擇然后隱藏所有具有以product_開頭的id的元素

---

var hotelCode = CUNMXHIDD,CUNMXMAYA,CUNMXDSAN
var splittedHotelCode = hotelCode.toString().split(',');
var lastIndex = 0;
jQuery.each(splittedHotelCode, function(i, hotelCode) {
 $("#product_"+ i).attr("id","product_"+ hotelCode);
 lastIndex = i;
});

$('[id^="product_"]:gt('+lastIndex+')').hide();