Поиск дублированного содержимого div и его замена - PullRequest
Новая
       48

Поиск дублированного содержимого div и его замена

0 голосов
/ 21 декабря 2018

Просто я хочу:

Создать таблицу размеров и добавить доступные (включенные) размеры для замены этих размеров в таблице размеров.

Чтобы расширить:

У меня есть все размеры обуви от 4 до 12, скрытые под div#hidden-shoe-sizes

Затем я хочу использовать prependTo, чтобы добавить информацию из этого div до .swatches-select div

Затем я хочу заменить предварительно добавленный контент на .swatch-enabled div, где есть дубликаты.Я использую .basel-tooltip-label span, чтобы найти дубликаты.

Причина, по которой мне нужно это сделать, состоит в том, чтобы сохранить .swatches-select div, которые имеют .swatch-enabled, чтобы они не были затронуты, как и data-value с div'ами, которые используются для моего сайта.

Я не уверен, с чего начать, так как даже не могу получить родителей дубликата div, чтобы иметь фон.Если бы я мог сделать это, возможно, я мог бы выяснить остальное.Любое руководство приветствуется!

Пожалуйста, просмотрите мой 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');
}

1 Ответ

0 голосов
/ 22 декабря 2018

Хорошо, после долгих раздумий я нашел рабочее решение.Мой следующий вопрос - как мне минимизировать это, так как это много повторяющегося кода jQuery.

Вот рабочая JSFiddle

Рабочая jQuery Code: 

$('#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>

Теперь я пытаюсь минимизировать мой код, чтобы он не был таким повторяющимся: Новый вопрос .

...