Как из формы вытянуть таблицу и поместить ее в другом месте?

Question

[ligisayan]

Есть форма с json объектом, в которой находится таблица с классом description-table и span с классом price. Вопрос: как вытащить таблицу и спан из формы, но сохранить привязку, причем так, чтобы они были расположены выше самой формы по структуре документа?

<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $post->ID; ?>" data-product_variations="<?php echo esc_attr( json_encode( $variable_products['available_variations'] ) ) ?>">
  <div class="single_variation">
    <span class="price"><span class="amount">260.000&nbsp;руб.</span></span>
  </div>
  <table class="description-table">
    <tbody>
      <tr>
        <td class="product-quantity">
          <div class="quantity buttons_added">
            <input type="number" step="1" min="1" max="27" id="num_count" name="quantity" value="1" title="Кол." class="input-text qty text" size="4">
            <span>порц.</span>
            <input type="button" value="+1" id="button_plus" class="plus">
            <input type="button" value="-1" id="button_minus" class="minus">
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <!--/ .description-table-->
<button type="submit" class="button add_to_cart_button product_type_simple single_add_to_cart_button"><?php echo $product->single_add_to_cart_text(); ?></button>
<input type="hidden" name="add-to-cart" value="<?php echo $product->id; ?>" />
		<input type="hidden" name="product_id" value="<?php echo esc_attr( $post->ID ); ?>" />
		<input type="hidden" name="variation_id" value="" />

</form>

Answer 1

[Kovalsky]

Если я все правильно понял, то с jQuery можно сделать так:

$('.variations_form.cart').before( $('.description-table, .price').clone() )

Без jQuery как-то так:

var form = document.getElementsByClassName('variations_form')[0],
    form_container = form.parentElement,
    table_copy = form.getElementsByClassName('description-table')[0].cloneNode(true),
    span_copy = form.getElementsByClassName('price')[0].cloneNode(true);

form_container.insertBefore(table_copy, form);
form_container.insertBefore(span_copy, form);

Answer 2

[Тоша Марсик]

можно пойти трудным путём и заюзать jquery :

Допустим страница содержит следующий текст:

 <ul class="list l1">
   <li class="item i1"> Высоко </li>	
   <li class="item i2"> Быстро </li>	
   <li class="item i3"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class="item i1"> Выше </li>	
   <li class="item i2"> Быстрее </li>	
   <li class="item i3"> Сильнее </li>	
 </ul>

следующие два выражения будут равнозначны

 $(".i1").replaceWith("<li class='item'>Тест</li>");
 
 $("<li class='item'>Тест</li>").replaceAll($(".i1"));

в обоих случаях элемент списка с текстом "Тест" заменит элементы с классом i1. В результате, текст нашей страницы станет следующим:

 <ul class="list l1">
   <li class='item'>Тест</li>	
   <li class="item i2"> Быстро </li>	
   <li class="item i3"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class='item'>Тест</li>	
   <li class="item i2"> Быстрее </li>	
   <li class="item i3"> Сильнее </li>	
 </ul>


Помимо html-текста, можно заменять одни элементы страницы другими. При этом, вставляемые элементы будут не скопированы, а перемещены. Например следующий код

 $(".l2 i2").replaceWith($(".l1 i1"));

изменит первоначальную страницу следующим образом:

 <ul class="list l1">
   <li class="item i2"> Быстро </li>	
   <li class="item i3"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class="item i1"> Выше </li>	
   <li class="item i1"> Высоко </li>	
   <li class="item i3"> Сильнее </li>	
 </ul>


Рассмотрим пример с использованием пользовательской функции. Добавим драматичности элементам из второго списка:

 $(".l2 .item").replaceWith(function(){
     return ' <li class="item" > '+$(this).text()+', я кому сказал! </li>';
 });

в итоге, текст первоначальной страницы станет следующим:

 <ul class="list l1">
   <li class="item i1"> Высоко </li>	
   <li class="item i2"> Быстро </li>	
   <li class="item i3"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class="item"> Выше, я кому сказал! </li>	
   <li class="item"> Быстрее, я кому сказал! </li>	
   <li class="item"> Сильнее, я кому сказал! </li>	
 </ul>

Comments

[ligisayan]

эммм.. Тоша Марсик что-то я не сильно догоняю как ваш ответ соотносится с вопросом..? Если я не сильно ясно выразился - мне нужно грубо говоря из form-table-/table-/form получить table-/table-form-/form и не потерять связь при этом. Причем тут вообще замена?

[Kovalsky]

ligisayan: на самом деле я тоже не совсем понял ваш вопрос. То есть некоторые слова не понял: например, что вы подразумеваете под "получить"/"вытащить" и "не потерять связь"?

Вам нужно копии каких-то элементов разместить в другом месте DOM? Если да, то с jQuery можно было бы, например, использовать .clone() и .append():

$target.append( $('.description-table, .price').clone() )