Смена родителя у потомков другого родителя

Question

Смена родителя у потомков другого родителя

0

Я новичок в js, и у меня проблема. У меня есть эта html-разметка:

<div id="searchBar">
  <div>
    <a>some link </a>
    <span>some text </span>
  </div>
</div>

и после использования js script я хочу получить следующее:

<div id="searchBar">
  <div>
    <div class="toplink_bl">
      <a>some link </a>
      <span>some text </span>
    </div>
  </div>
</div>

но что-то не так, и я получаю это:

<div id="searchBar">
  <div>
      <a>some link </a>
      <span>some text </span>
      <div class="toplink_bl"></div>
  </div>
</div>

Вот код js:

 var toplink_div=document.createElement('div');
 toplink_div.className="toplink_bl";
 $(toplink_div).appendTo($("#searchBar div"));
 for(var i = 0; i < $("#searchBar div").childNodes.length; i++) {
  toplink_div.appendChild($("#searchBar div").childNodes[i]);
 };

UPD:
@Ricky Stam, спасибо, это работает! Можете ли вы помочь с той же проблемой, но с некоторыми дополнительными? Я добавил новую строку в свой код:

<div id="searchBar">
  <div class="inner">
    <a>some link </a>
    <span>some text </span>
    <input type="text" class="searchInput" value="" name="q" id="keywords" tabindex="1">
  </div>
</div>

И я хочу, чтобы <div class='new'> включал два элемента <a> и <span> но не <input>.
Поэтому после использования $( ".inner").wrapInner( "<div class='new'></div>"); это должно быть так:

<div id="searchBar">
  <div class="inner">
    <div class='new'>
      <a>some link </a>
      <span>some text </span>
    </div>
    <input type="text" class="searchInput" value="" name="q" id="keywords" tabindex="1">
  </div>
</div>

Как я могу это сделать?

mzarb 12 нояб. 2013, в 12:23

Источник

0

Попробуйте $ (". SearchInput"). AppendTo (". Inner")
Ricky Stam 12 нояб. 2013, в 13:23

Теги:

javascript

html

2 ответа

0

Вместо этого вы должны использовать prependTo.

Следуя их примеру, это:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

С помощью этого кода:

$( "<p>Test</p>" ).prependTo( ".inner" );

Результаты в этом:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    <p>Test</p>
    Hello
  </div>
  <div class="inner">
    <p>Test</p>
    Goodbye
  </div>
</div>

Так измените свой код следующим образом:

 var toplink_div=document.createElement('div');
 toplink_div.className="toplink_bl";
 $(toplink_div).prependTo($("#searchBar div"));
 for(var i = 0; i < $("#searchBar div").childNodes.length; i++) {
  toplink_div.apendChild($("#searchBar div").childNodes[i]);
 };

Здесь вы можете увидеть, как он работает: http://jsfiddle.net/WRWy5/1/

Vitor Canova 12 нояб. 2013, в 08:29

0

ОП не хочет добавлять или добавлять что-то, он хочет что-то завернуть
Ricky Stam 12 нояб. 2013, в 10:52
0

@RickyStam Я понял, что он хочет prependTo #searchBar div его toplink_div .
Vitor Canova 12 нояб. 2013, в 10:58

Ещё вопросы

Попробуйте $ (". SearchInput"). AppendTo (". Inner")
ОП не хочет добавлять или добавлять что-то, он хочет что-то завернуть
@RickyStam Я понял, что он хочет prependTo #searchBar div его toplink_div .

Ricky Stam · Accepted Answer · 2013-11-12T09-41-00.000Z

HTML

<div id="searchBar">
  <div class="inner">
    <a>some link </a>
    <span>some text </span>
  </div>
</div>

Javascript

$( ".inner" ).wrapInner( "<div class='new'></div>");

Это поместит все внутри "внутреннего" div внутри div с классом = "новый".

Сорри за этот комплимент. Можете ли вы помочь мне с проблемой в обновленной части вопроса?