如果第一个 child 是图像，则将 nth-child(2) 移动到第一个

Question

我想做的是首先检查无序列表中的第一个元素是否是图像，如果是图像则将第一个 child 移动到第二个 child 或者如果更容易将第二个 child 移动到第一个。

<ul>
    <li><img src="test.img" alt=""></li>
    <li><p>text</p></li>
    <li><p>text2</p></li>
</ul>
<ul>
    <li><p>text</p></li>
    <li><img src="test.img" alt=""></li>
    <li><p>text2</p></li>
</ul>

然后完成的结果将如下所示：

<ul>
    <li><p>text</p></li>
    <li><img src="test.img" alt=""></li>
    <li><p>text2</p></li>
</ul>
<ul>
    <li><p>text</p></li>
    <li><img src="test.img" alt=""></li>
    <li><p>text2</p></li>
</ul>

我如何专门针对第一个列表并在不移动第二个列表的情况下移动那个列表？那么只针对第一个无序列表列表项并根据 if 语句移动它？我试过使用 insertBefore 但我觉得我可能用错了？

希望尽可能不使用 jquery，感谢您的帮助！

Answer 1

您可以遍历所有 <ul> 元素。检查第一个 <li> children 是否有 <img> 标签。如果确实如此，则在第二个 <li>.

之后先移动 <li>

请查看下面的代码示例：

$(function() {
  $('ul').each(function() {
    var $first = $(this).children().first();

    // If first <li> has an <image> child
    if ($first.has('img').length) {
      // Move the <li> to second position
      $first.insertAfter($first.next())
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
    <li><img src="test.img" alt="IMG"></li>
    <li><p>text</p></li>
    <li><p>text2</p></li>
</ul>
<hr>  
<ul>
    <li><p>text</p></li>
    <li><img src="test.img" alt="IMG"></li>
    <li><p>text2</p></li>
</ul>

如果第一个 child 是图像，则将 nth-child(2) 移动到第一个

Moving the nth-child(2) to be first if the first child is an image

javascript

prepend