将两个兄弟从一个元素分成两个兄弟

Question

＆＃13;

＆＃13;

$('ul.siblings').not(':first').remove().children('li').appendTo('ul:first');

＆＃13;

ul {
  border: 1px solid red;
  background: blue;
}
li {
  background: blue;
}

.siblings {
  color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <ul class='siblings'>
    <li>1
      <a>1</a>
      <div>1</div>
    </li>
    <li>2
      <a>2</a>
      <div>2</div>
    </li>
  </ul>
  <ul class='siblings'>
    <li>3
      <a>3</a>
      <div>3</div>
    </li>
    <li>4
      <a>4</a>
      <div>4</div>
    </li>
  </ul>      
</div>

<div class="list">
  <ul class='siblings'>
    <li>1
      <a>1</a>
      <div>1</div>
    </li>
    <li>2
      <a>2</a>
      <div>2</div>
    </li>
  </ul>
  <ul class='siblings'>
    <li>3
      <a>3</a>
      <div>3</div>
    </li>
    <li>4
      <a>4</a>
      <div>4</div>
    </li>
  </ul>      
</div>

＆＃13;

＆＃13;

＆＃13;

您好，有这样的html结构，例如两个ul中的两个 div ，分辨率为＆lt; 681 px， 2 ul在第一个div合并合并为一个 ul但第二个div不应该触及此内容，它必须位于被动状态，反之亦然。

分辨率＆gt; 680，在活动div 中，一个ul再次通过两个 ul到达起始位置，而不会丢失孩子。有必要在不使用元素的附加类的情况下解决任务_。

感谢您的关注

Answer 1

您指的是这个吗？

• 只是第一个列表div的ul兄弟姐妹被连接在一起，而第二个列表div被分开。 使用.eq(0)我们将第一个ul与兄弟姐妹作为目标，并将li添加到第一个ul。

$('ul.siblings').eq(0).remove().children('li').prependTo('ul:first');

ul {
  border: 1px solid red;
  background: blue;
}
li {
  background: blue;
}

.siblings {
  color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <ul class='siblings'>
    <li>1
      <a>1</a>
      <div>1</div>
    </li>
    <li>2
      <a>2</a>
      <div>2</div>
    </li>
  </ul>
  <ul class='siblings'>
    <li>3
      <a>3</a>
      <div>3</div>
    </li>
    <li>4
      <a>4</a>
      <div>4</div>
    </li>
  </ul>      
</div>

<div class="list">
  <ul class='siblings'>
    <li>1
      <a>1</a>
      <div>1</div>
    </li>
    <li>2
      <a>2</a>
      <div>2</div>
    </li>
  </ul>
  <ul class='siblings'>
    <li>3
      <a>3</a>
      <div>3</div>
    </li>
    <li>4
      <a>4</a>
      <div>4</div>
    </li>
  </ul>      
</div>