Question

我正在尝试重组元素。我面临的问题是元素没有唯一的类或ID。因此，例如，如果正在调用df %>% mutate(date = str_sub(as.character(date), 7, 10)) %>% #Taking out the year from "date" group_by(date, Chemical) %>% #Group by "date" and "Chemical" summarise(temp = length(concentration[concentration > limit])/n()*100) %>% #Applying the condition spread(Chemical, temp, fill = 0) #Reshaping the data，显然它将移动所有匹配的元素。 HTML看起来像这样（重要：真实的场景包含数百个.prependTo元素）：

<li>

所以我想将text3移为text-parent的第一个孩子。但仅在其自身的父元素中。因此，text3不应移至其他<div id="top-element"> <ul> <li> <div class="image"></div> <div class="text-parent"> <div class="text1">example</div> <div class="text2">example</div> <div class="text3">example</div> </div> </li> <li> <div class="image"></div> <div class="text-parent"> <div class="text1">example</div> <div class="text2">example</div> <div class="text3">example</div> </div> </li> <li> <div class="image"></div> <div class="text-parent"> <div class="text1">example</div> <div class="text2">example</div> <div class="text3">example</div> </div> </li> </ul> </div>元素。我已经尝试过了，但这是不正确的，它仍然跨越所有元素：

<li>

如何将功能限制于其父项？

Answer 1

您的代码是错误的，因为它选择了所有.text-parent并将每一个都插入。您需要使用.text3遍历.each()并在函数中选择元素的相关父元素。

$('.text3').each(function(){
  $(this).parent().prepend(this);
  // Or
  $(this).parent('.text-parent').prepend(this);
  // Or
  $(this).prependTo($(this).parent('.text-parent'));
});

$('.text3').each(function(){
  $(this).parent().prepend(this);
});

.text-parent {border: 1px solid #000}
.text-parent > .text3 {color: red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top-element">          
    <ul>
        <li>
            <div class="image"></div>
            <div class="text-parent">
                <div class="text1">example</div>
                <div class="text2">example2</div>
                <div class="text3">example3</div>
            </div>
        </li>
        <li>
            <div class="image"></div>
            <div class="text-parent">
                <div class="text1">example</div>
                <div class="text2">example2</div>
                <div class="text3">example3</div>
            </div>
        </li>
        <li>
            <div class="image"></div>
            <div class="text-parent">
                <div class="text1">example</div>
                <div class="text2">example2</div>
                <div class="text3">example3</div>
            </div>
        </li>
    </ul>
</div>

Answer 2

您可以使用insertBefore

将匹配元素集中的每个元素插入到目标之前。

 $(this).insertBefore($(this).siblings('.text1'));

$(".text3").each(function(){
  $(this).insertBefore($(this).siblings('.text1'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top-element">          
    <ul>
        <li>
            <div class="image"></div>
            <div class="text-parent">
                <div class="text1">example</div>
                <div class="text2">example</div>
                <div class="text3">example3</div>
            </div>
        </li>
        <li>
            <div class="image"></div>
            <div class="text-parent">
                <div class="text1">example</div>
                <div class="text2">example</div>
                <div class="text3">example3</div>
            </div>
        </li>
        <li>
            <div class="image"></div>
            <div class="text-parent">
                <div class="text1">example</div>
                <div class="text2">example</div>
                <div class="text3">example3</div>
            </div>
        </li>
    </ul>
</div>

jQuery选择element的父元素并对其使用prependTo（）

2 个答案: