Question

我想删除两个特定元素之间的div

<div id="test1">
  <div id="test2">
    <div id="test3">
      <div id="test4">
        <div id="test5">
          <div id="test6">
            <ul id="ulid">
              <li>item1</li>
              <li>item2</li>
              <li>item3</li>
              <li>item4</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我想删除id test1和id ulid之间的div 如何使用unwrap here 预期产出

<div id="test1">
  <ul id="ulid">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
  </ul>
</div>

Answer 1

＆＃13;

$( "#test2" ).replaceWith($('#ulid'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="test1">
      <div id="test2">
        <div id="test3">
          <div id="test4">
            <div id="test5">
              <div id="test6">
                <ul id="ulid">
                  <li>item1</li>
                  <li>item2</li>
                  <li>item3</li>
                  <li>item4</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

＆＃13;

Answer 2

你不需要循环。您缺少jQuery中的contents函数。

返回所选元素的子元素。

$('div[id^="test"][id!="test1"]').contents().unwrap();

Answer 3

尝试此操作并添加此jQuery $('div[id^="test"][id!="test1"]').contents().unwrap();

＆＃13;

$('div[id^="test"][id!="test1"]').contents().unwrap();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">
  <div id="test2">
    <div id="test3">
      <div id="test4">
        <div id="test5">
          <div id="test6">
            <ul id="ulid">
              <li>item1</li>
              <li>item2</li>
              <li>item3</li>
              <li>item4</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

您要解包div元素，这些元素是ul#ulid的父元素。

您可以多次在unwrap()上致电#ulid，直到找到要保留的元素（即#test1）。您可以使用attr()检查是否已到达元素。这很容易，因为目标是删除每个父项，直到#test1为父项。在jQuery中实现了一个非常有用的parent()函数。

这是一个演示此内容的简单代码段。（我正在使用CSS来表明要删除的元素。）

$(document).ready(function() {
  $("#unwrap").click(function() {
    while ($("#ulid").parent().attr("id") !== "test1") { // while the id of the parent is not "test1"
      $("#ulid").unwrap();
    }
  });
});

#test1 {
  color: red;
}

#test2 {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">
  <div id="test2">
    <div id="test3">
      <div id="test4">
        <div id="test5">
          <div id="test6">
            <ul id="ulid">
              <li>item1</li>
              <li>item2</li>
              <li>item3</li>
              <li>item4</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<button id="unwrap">Unwrap</button>

以下是HTML解包后的样子：

<div id="test1">
  <ul id="ulid">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
  </ul>
</div>

你的问题（希望）已经解决了！

你真正需要的只是一个简单的循环。希望这会有所帮助。

在两个元素之间展开div标签

4 个答案: