0

Приветствую! Помогите решить следующую задачу: Есть форма, в которой есть n-кол-во div.component, нужно сделать так, что если в родительском div.component есть div.component_option_thumbnail.selected, то span.amount копируем в конец h3.
По сути, если .component_option_thumbnail имеет класс .selected, то в h3 копируем span.amount.

<form>
   <div class="component">
      <div class="component-title">
         <h3>Заголовок 1</h3>
      </div>
      <div class="component-inner">
         <div class="component_option_thumbnail selected">
            <span class="price">
               <span class="amount">1000</span>
            </span>
         </div>
      </div>
   </div>

   <div class="component">
      <div class="component-title">
         <h3>Заголовок 2</h3>
      </div>
      <div class="component-inner">
         <div class="component_option_thumbnail">
            <span class="price">
               <span class="amount">2000</span>
            </span>
         </div>
      </div>
   </div>

   <div class="component">
      <div class="component-title">
         <h3>Заголовок 3</h3>
      </div>
      <div class="component-inner">
         <div class="component_option_thumbnail">
            <span class="price">
               <span class="amount">3000</span>
            </span>
         </div>
      </div>
   </div>
</form>

Заранее, спасибо!

1
  • Не очень ясна суть задачи. Какого h3? Внутрь него переносить или рядом? И в чём у вас возникла проблема? Уточните пожалуйста
    – Yuri
    12 янв 2017 в 11:59

3 ответа 3

2
$('.component').each( function( index, comp_node ){
    const $amount = $( '.component_option_thumbnail.selected .amount', comp_node ); 
    $( 'h3', comp_node ).append( $amount.text() ); 
} );

Константа $amount будет содержать jquery обёртку над узлом с классом .amount, который содержится в текущем узле (comp_node) и у которого есть предок с классами .component_option_thumbnail и .selected одновременно. Если такого узла нет то в $amount будет пустой jquey объект.

Метод text для непустого jquery объекта вернёт тест содержащийся во всех узлах выборки (конкатенация текстов всех узлов). Для пустого объекта вернётся пустая строка, за счет этого нет необходимости проверять наличие или отсутствие .content_option_thumbnail c .selected.

1

Если я правильно понял ваше описание задачи, то вот так:

$(function() {
  $('form .component').each(function() {
    if($(this).find('.component_option_thumbnail').hasClass('selected')){
      $(this).find('h3').append($(this).find('span.amount').clone());
    };
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
   <div class="component">
      <div class="component-title">
         <h3>Заголовок 1</h3>
      </div>
      <div class="component-inner">
         <div class="component_option_thumbnail selected">
            <span class="price">
               <span class="amount">1000</span>
            </span>
         </div>
      </div>
   </div>

   <div class="component">
      <div class="component-title">
         <h3>Заголовок 2</h3>
      </div>
      <div class="component-inner">
         <div class="component_option_thumbnail">
            <span class="price">
               <span class="amount">2000</span>
            </span>
         </div>
      </div>
   </div>

   <div class="component">
      <div class="component-title">
         <h3>Заголовок 3</h3>
      </div>
      <div class="component-inner">
         <div class="component_option_thumbnail">
            <span class="price">
               <span class="amount">3000</span>
            </span>
         </div>
      </div>
   </div>
</form>

1
1

$(".component").each(function(){
 if($(this).find(".component_option_thumbnail").hasClass("selected"))
 {  
  $(this).find("h3").append($(".component_option_thumbnail.selected").find(".amount").html());
 }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
   <div class="component">
      <div class="component-title">
         <h3>Заголовок 1</h3>
      </div>
      <div class="component-inner">
         <div class="component_option_thumbnail selected">
            <span class="price">
               <span class="amount">1000</span>
            </span>
         </div>
      </div>
   </div>

   <div class="component">
      <div class="component-title">
         <h3>Заголовок 2</h3>
      </div>
      <div class="component-inner">
         <div class="component_option_thumbnail">
            <span class="price">
               <span class="amount">2000</span>
            </span>
         </div>
      </div>
   </div>

   <div class="component">
      <div class="component-title">
         <h3>Заголовок 3</h3>
      </div>
      <div class="component-inner">
         <div class="component_option_thumbnail">
            <span class="price">
               <span class="amount">3000</span>
            </span>
         </div>
      </div>
   </div>
</form>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.