[英]jQuery hide all images except first
I have a data collection thats gets rendered from the server. 我有一个数据收集,多数民众赞成从服务器呈现。 This is how the HTML might looks like:
HTML可能如下所示:
<div>
<img class="image_98" alt="..." height="..." src="..." width="..." />
</div>
<div>
<img class="image_99" alt="..." height="..." src="..." width="..." />
</div>
<div>
<img class="image_99" alt="..." height="..." src="..." width="..." />
</div>
<div>
<img class="image_100" alt="..." height="..." src="..." width="..." />
</div>
<div>
<img class="image_100" alt="..." height="..." src="..." width="..." />
</div>
<div>
<img class="image_100" alt="..." height="..." src="..." width="..." />
</div>
The image class is dynamic depending on the id of the image in the database. 图像类是动态的,具体取决于数据库中图像的ID。 How can I hide all images except the first one of every class?
除了每个课程的第一个图像,我如何隐藏所有图像?
In this example I only want to see the first "image_98", "image_99" and "image_100" class. 在此示例中,我只想看到第一个“ image_98”,“ image_99”和“ image_100”类。
You can do it like this, using attribute selector [attribute="value"]
and each()
method 您可以使用属性选择器
[attribute="value"]
和each()
方法来做到这一点
var img=$('[class^="image_"]');
img.hide(); //hide all image
img.each(function(){
$('.'+this.className).eq(0).show(); // show first image in each class
});
Use 采用
Old school method : 老派方法:
var slice = Array.prototype.slice,
imgs = slice.call(document.getElementsByTagName('img')),
img, ct, cls;
while (img = imgs.shift()) {
if (cls === img.className) {
ct = img.parentNode;
ct.parentNode.removeChild(ct);
} else {
cls = img.className;
}
}
Yuk indeed... 的确是
Using jQuery, I would do quite the same : 使用jQuery,我会做同样的事情:
var prevCls;
$('img').each(function () {
var cls = $(this).attr('class'); // I have a doubt about .className support
if (prevCls === cls) {
$(this.parentNode).remove(); // or .hide() if preferred
} else {
prevCls = cls;
}
});
Advantage comparing to the accepted answer : a single loop. 与公认的答案相比,优点是:一个循环。
Here is another method using recursivity - quite close to the first one : 这是另一种使用递归的方法-与第一种方法非常接近:
(function deldup(list, prevCls) {
var item = list.shift();
if (item.className !== prevCls) {
prevCls = item.className;
} else {
item = item.parentNode;
item.parentNode.removeChild(item);
}
if (list.length) {
deldup(list, prevCls);
}
})(
Array.prototype.slice.call(
document.getElementsByTagName('img')
)
);
Advantage : no global variables. 优点:没有全局变量。
In case images are mixed : 如果图像混合在一起:
(function deldup(list, cls) {
var item = list.shift();
if (!cls[item.className]) {
cls[item.className] = true;
} else {
item = item.parentNode;
item.parentNode.removeChild(item);
}
if (list.length) {
deldup(list, cls);
}
})(
Array.prototype.slice.call(
document.getElementsByTagName('span')
), {} // notice this empty object
);
Demo : http://jsfiddle.net/wared/QpZD5/ . 演示: http : //jsfiddle.net/wared/QpZD5/ 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.