我正在尝试将具有相同属性的div组合并将它们放入容器div中。生成div。结构看起来像这样。
<div class="cleanse">A</div>
<div class="treat">B</div>
<div class="prime">C</div>
<br><br><br>
<div class="product"><img alt="red" src="http://aar.co/508-859-thickbox/therapy-ball-small-red.jpg" width="100px"></div>
<div class="product"><img alt="blue" src="http://www.valleyvet.com/swatches/11178_L_230_vvs.jpg" width="100px"></div>
<div class="product"><img alt="red" src="http://aar.co/508-859-thickbox/therapy-ball-small-red.jpg" width="100px"></div>
<div class="product"><img alt="yellow" src="http://debenhams.scene7.com/is/image/Debenhams/304028400423?$ProdLarge$" width="100px"></div>
<div class="product"><img alt="blue" src="http://www.valleyvet.com/swatches/11178_L_230_vvs.jpg" width="100px"></div>
到目前为止,我所拥有的脚本无法正常工作
$(function(){
$('.product').each(function(){
if ($(this).is('[red]')) {
$(this).appendTo($('.cleanse'));
} else {
if ($(this).is('[blue]')) {
$(this).appendTo($('.treat'));
} else {
if ($(this).is('[yellow]')) {
$(this).appendTo($('.prime'));
}
}
}
}
});
答案 0 :(得分:7)
使用has
过滤器:
$(function() {
var $products = $('.product');
$products.filter(':has([alt=red])').appendTo('.cleanse');
$products.filter(':has([alt=blue])').appendTo('.treat');
$products.filter(':has([alt=yellow])').appendTo('.prime');
});
这是小提琴:http://jsfiddle.net/qxRY4/1/
如果您正在处理更大的数据集,则可能需要使用循环。方法如下:
$(function() {
var $products = $('.product');
var map = {
red: 'cleanse',
blue: 'treat',
yellow: 'prime'
};
$.each(map, function (attr, className) {
$products.filter(':has([alt=' + attr + '])').appendTo('.' + className);
});
});
答案 1 :(得分:0)
试试这个:
$(function(){
var colorMap = {red: "cleanse", blue: "treat", yellow: "prime"};
$('.product > img').each(function(){
var el = $(this);
el.appendTo($('.' + colorMap[el.attr('alt')]));
});
});
答案 2 :(得分:0)
$(function() {
var $prod = $('.product');
$prod.find('[alt="red"]').appendTo($('.cleanse'));
$prod.find('[alt="blue"]').appendTo($('.treat'));
$prod.find('[alt="yellow"]').appendTo($('.prime'));
});
这将移动父<div>
$(function() {
var $prod = $('.product');
$prod.find('[alt="red"]').parent().appendTo($('.cleanse'));
$prod.find('[alt="blue"]').parent().appendTo($('.treat'));
$prod.find('[alt="yellow"]').parent().appendTo($('.prime'));
});
答案 3 :(得分:0)
如果你想保持迭代.product
,首先你需要选择img标签,不仅如此,因为这将是div,而不是带有alt的图像标签:
$(function(){
$('.product').each(function(){
if ($("img",this).is('[alt="red"]')) {
$(this).appendTo('.cleanse');
} else {
if ($("img",this).is('[alt="blue"]')) {
$(this).appendTo('.treat');
} else {
if ($("img",this).is('[alt="yellow"]')) {
$(this).appendTo('.prime');
}
}
}
}
});