查找重复的div内容并将其替换 [英] Finding duplicate div content and replacing it
本文介绍了查找重复的div内容并将其替换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我只想:
创建尺寸表并添加可用(启用)的尺寸以替换尺寸表中的那些尺寸div.
Create a size chart and add the available (enabled) sizes to replace those size div's in the size chart.
展开:
我将所有尺寸从4到12的鞋子都隐藏在div#hidden-shoe-sizes
I have all my shoe sizes from 4 to 12 hidden under a div#hidden-shoe-sizes
然后我想使用prependTo将来自div的信息附加到.swatches-select div
I then want to use prependTo to append the info from that div to the .swatches-select div
然后我想将重复的内容替换为.swatch-enabled div的内容.我正在使用.basel-tooltip-label span查找重复项.
Then I want to replace the prepended content with the .swatch-enabled div's where there are duplicates. I'm using the .basel-tooltip-label span to find the duplicate items.
我需要这样做的原因是要使具有.swatch-enabled的.swatches-select div保持不受影响，因为具有data-value的div与用于我的站点的div无关.
The reason I need to do this is to keep the .swatches-select div's that have .swatch-enabled to be unaffected as it has data-value with the div's that is used for my site.
我不确定从哪里开始，因为我什至无法让重复的div的父母有背景.如果可以的话，也许我可以找出其余的.任何指导，我们将不胜感激！
I'm unsure where to start as I can't even get the parents of the duplicate div's to have a background. If I could do that maybe I can figure out the rest. Any guidance is greatly appreciated!
请查看我的 jsfiddle
CSS
.basel-tooltip-label { display: none; }
.swatch-size-large {
padding: 10px 10px;
border: 1px solid #ccc;
float: left;
margin-right:4px;
}
.swatch-size-large.swatch-enabled {
border-color: green;
background: green;
color: white;
}
.blue { background: blue !important; }
/* Hidden Sizes */
#hidden-shoe-sizes { display: none; }
HTML
<div class="swatches-select" data-id="pa_size">
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-enabled" data-value="6 ½" style="">
<span class="basel-tooltip-label">6 ½</span>6 ½
</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-enabled" data-value="11" style="">
<span class="basel-tooltip-label">11</span>11
</div>
</div>
<div id="hidden-shoe-sizes">
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">4</span>4</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5</span>5</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5 ½</span>5 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6</span>6</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6 ½</span>6 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7</span>7</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7 ½</span>7 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8</span>8</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8 ½</span>8 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">9</span>9</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">10</span>10</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">11</span>11</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">12</span>12</div>
</div>
JQuery
$('#hidden-shoe-sizes').contents().prependTo('.swatches-select');
if ($('.swatch-enabled span').text() == $('.swatch-disabled span').text()){
$('span').parent().addClass('blue');
}
推荐答案
好吧，经过一番混乱之后，我想出了一个可行的解决方案.我的下一个问题是，由于重复了很多jQuery代码，我该如何缩小代码.
Okay after a lot of messing around I came up with a working solution. My next question is how do I minify this as it's a lot of repeating jQuery code.
这是工作中的 JSFiddle
有效的jQuery代码:
$('#hidden-shoe-sizes').contents().prependTo('.swatches-select');
var sizefour = $('[data-value="4"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizefour){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="4"]'));
};
});
var sizefive = $('[data-value="5"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizefive){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="5"]'));
};
});
var sizefivehalf = $('[data-value="5 ½"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizefivehalf){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="5 ½"]'));
};
});
var sizesix = $('[data-value="6"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizesix){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="6"]'));
};
});
var sizesixhalf = $('[data-value="6 ½"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizesixhalf){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="6 ½"]'));
};
});
var sizeseven = $('[data-value="7"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizeseven){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="7"]'));
};
});
var sizesevenhalf = $('[data-value="7 ½"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizesevenhalf){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="7 ½"]'));
};
});
var sizeeight = $('[data-value="8"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizeeight){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="8"]'));
};
});
var sizeeighthalf = $('[data-value="8 ½"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizeeighthalf){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="8 ½"]'));
};
});
var sizenine = $('[data-value="9"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizenine){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="9"]'));
};
});
var sizeten = $('[data-value="10"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizeten){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="10"]'));
};
});
var sizeeleven = $('[data-value="11"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizeeleven){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="11"]'));
};
});
var sizetwelve = $('[data-value="12"] span').text();
$('.swatch-disabled .basel-tooltip-label').each(function(){
if($(this).text()==sizetwelve){
$(this).closest('.swatch-disabled').replaceWith($('[data-value="12"]'));
};
});
.basel-tooltip-label { display: none; }
.swatch-size-large {
padding: 10px 10px;
border: 1px solid #ccc;
float: left;
margin-right:4px;
}
.swatch-size-large.swatch-enabled {
border-color: green;
background: green;
color: white;
}
.blue { background: blue !important; }
.orange { background: orange !important; }
/* Hidden Sizes */
#hidden-shoe-sizes { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="total">
<div class="swatches-select" data-id="pa_size">
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-enabled" data-value="6 ½" style="">
<span class="basel-tooltip-label">6 ½</span>6 ½
</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-enabled" data-value="11" style="">
<span class="basel-tooltip-label">11</span>11
</div>
</div>
<div id="hidden-shoe-sizes">
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">4</span>4</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5</span>5</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">5 ½</span>5 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6</span>6</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">6 ½</span>6 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7</span>7</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">7 ½</span>7 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8</span>8</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">8 ½</span>8 ½</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">9</span>9</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">10</span>10</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">11</span>11</div>
<div class="basel-swatch basel-tooltip text-only swatch-size-large swatch-disabled"><span class="basel-tooltip-label">12</span>12</div>
</div>
</div>
Now I'm trying to minify my code to not be so repetitive: New question.
这篇关于查找重复的div内容并将其替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
