如何删除 div 并将其粘贴到另一个 div

Question

Objective:

我正在 space 广场上的一个网站上工作，我想在其中删除一个 div 并将其显示到另一个 div。

我目前的努力：

我试图从下面的 SO link 中找到解决方案，但没有帮助我

cut a div and html inside it and paste it into a different div with jquery
cut completely and paste an element

我想做的是，如下图：

你可以在图片中看到，因为我想从底部剪切“SOLD OUT”文本，并想粘贴在图片的顶部

我正在使用 jQuery，我的代码

var soldList = $('div .grid-meta-status').get();
  var itemsList =  $('div .hentry').get();
  
  for(var i=0; i<soldList.length; i++)
  {
    if( soldList[i].innerText == "SOLD OUT" )
    {
      var item = $('div .grid-meta-status').get(i);

      $("div .grid-meta-status:nth-child(2)").remove();
      $("<div class='grid-meta-status'><div class='product-mark sold-out'>sold out</div></div>").filter(function( index ) {return $( "div .grid-meta-status" ).text() == "SOLD OUT"}).insertBefore(" .grid-image");
        //$("<div class='grid-meta-status'><div class='product-mark sold-out'>soldd out</div></div>").insertBefore(".grid-image");
      
    }
  }

网站linkhttps://trumpet-nonagon-ek9j.squarespace.com/originals

Answer 1

首先，您应该提供更多详细信息以获得答案。在提出新问题之前阅读 this link。

我在下面附上了一个模型示例。它包含两件商品 - 第一件已售罄，第二件尚未售罄。 HTML 和 CSS 代码是从您的 link 复制而来的，因此您可以忽略它。重要的部分是JS代码。正如您提到的，您正在使用 jQuery，您可以使用 jQuery 查询选择器轻松查找和移动元素。我的代码试图找到包含所有元数据的项目元素，并从那里检查该项目是否已售出。然后，它选择 sold-out 元并将其移动到前面。我在底部添加了 click here! 按钮，因此您可以使用它进行测试。

我不确定这是否是你想要的，因为这个问题是模棱两可的，但我想你可以从这里开始得到你想要的。

$("#test-button").on("click", function() {
    for(const grid_item of $(".grid-item")) {
    if($(grid_item).find("section .grid-meta-status .product-mark.sold-out").length) {
    $(grid_item).prepend($(grid_item).find("section .grid-meta-status"))
  }
  }
});

.grid-item {
  overflow-wrap: break-word;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
font-size: 1.3rem;
color: #000;
position: relative;
transition: opacity 1s ease,transform 1s ease;
opacity: 1;
transform: translatey(0);
}

.grid-image {
  overflow-wrap: break-word;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
-webkit-font-smoothing: antialiased;
font-size: 1.3rem;
color: #000;
display: block;
width: 100%;
position: relative;
overflow: hidden;
margin: 0;
line-height: 0;
}
.list-quick-view-wrapper {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
color: #000;
line-height: 0;
display: flex;
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
font-family: Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
z-index: auto;
box-sizing: border-box;
-webkit-box-align: end;
align-items: flex-end;
-webkit-box-pack: center;
justify-content: center;
bottom: -1px;
padding-bottom: 50% !important;
}
.sqs-product-quick-viewbutton {
  overflow-wrap: break-word;
font-family: Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0;
display: inline-block;
position: relative;
z-index: 6;
width: auto;
height: auto;
padding: 1.5em;
color: #fff;
background-color: #000;
border-width: 0;
line-height: 1em;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
transition: opacity .3s ease-in;
transform: translatey(50%);
}
.grid-image-wrapper {
  overflow-wrap: break-word;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
-webkit-font-smoothing: antialiased;
font-size: 1.3rem;
color: #000;
line-height: 0;
margin: 0;
height: 0;
overflow: hidden;
position: relative;
display: flex;
padding-bottom: 100%;
}
.grid-image-wrapper img {
  overflow-wrap: break-word;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
-webkit-font-smoothing: antialiased;
font-size: 1.3rem;
color: #000;
line-height: 0;
border: 0;
position: absolute;
top: 0;
left: 0;
opacity: 1;
transition: opacity 1s ease;
width: 100%;
height: 100%;
object-position: 50% 50%;
object-fit: cover;
}
.grid-meta-wrapper {
  overflow-wrap: break-word;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
font-size: 1.3rem;
color: #000;
display: flex;
width: 100%;
justify-content: space-between;
margin-top: 1vw;
flex-direction: column;
text-align: center;
}
.grid-main-meta {
  overflow-wrap: break-word;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
font-size: 1.3rem;
color: #000;
text-align: center;
}
.grid-title {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
text-align: center;
font-family: Old Standard TT;
font-weight: 400;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
line-height: 1.4em;
font-size: 1.5rem;
color: #000;
}
.grid-prices {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
text-align: center;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: .01em;
text-transform: none;
line-height: 1em;
font-size: 1.1rem;
margin-top: .5rem;
color: #000;
}
.product-price {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
text-align: center;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: .01em;
text-transform: none;
line-height: 1em;
font-size: 1.1rem;
color: #000;
}
.sqs-money-native {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
text-align: center;
font-family: Lato;
font-weight: 300;
font-style: normal;
letter-spacing: .01em;
text-transform: none;
line-height: 1em;
font-size: 1.1rem;
color: #000;
}
.grid-meta-status {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
color: #000;
font-family: Lato;
font-weight: 400;
font-style: normal;
letter-spacing: .01em;
text-transform: none;
line-height: 1em;
font-size: 1.1rem;
text-align: left !important;
}
.product-mark.sold-out {
  overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
color: #000;
font-family: Lato;
font-style: normal;
letter-spacing: .01em;
line-height: 1em;
font-size: 1.1rem;
text-align: left !important;
font-weight: bold;
text-transform: uppercase;
}

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div style="width:200px;text-align:center;">
      <div class="grid-item hentry category-in-the-weeds tag-all author-jessica-cecil post-type-store-item article-index-13 sold-out sqs-product-quick-view-button-hover-area is-loaded" id="thumb-a-day-in-the-weeds" data-item-id="5f07db9ded80fa4741aad1ac" data-controller="ProductListImageLoader" data-controllers-bound="ProductListImageLoader">
        <figure class="grid-image" data-animation-role="image">
          <div class="list-quick-view-wrapper sqs-product-quick-view-button-wrapper">
            <span class="sqs-product-quick-view-button" role="button" tabindex="0" data-id="5f07db9ded80fa4741aad1ac" data-group="5f07356969f7521d85f233ad">Quick View</span>
          </div>
          <div class="grid-image-wrapper has-hover-img">
            <img data-src="https://static1.squarespace.com/static/5f041b669538b147e0e24a89/5f07356969f7521d85f233ad/5f07db9ded80fa4741aad1ac/1594514045774/little+turtle+styled.jpg" data-image="https://static1.squarespace.com/static/5f041b669538b147e0e24a89/5f07356969f7521d85f233ad/5f07db9ded80fa4741aad1ac/1594514045774/little+turtle+styled.jpg" data-image-dimensions="1440x1440" data-image-focal-point="0.5,0.5" alt="&quot;A Day In The Weeds&quot; Original" data-load="false" class="grid-image-cover" data-parent-ratio="1.0" style="width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover;" data-image-resolution="500w" src="https://static1.squarespace.com/static/5f041b669538b147e0e24a89/5f07356969f7521d85f233ad/5f07db9ded80fa4741aad1ac/1594514045774/little+turtle+styled.jpg?format=500w">
            <img data-src="https://images.squarespace-cdn.com/content/v1/5f041b669538b147e0e24a89/1594499833340-MHG0W4TM81GKYWZ9MRXZ/ke17ZwdGBToddI8pDm48kGS78un_bcNZLY1QrfTmegV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmmzJBBHkqvGAibxByi2-xi1RoNc7vr9m3ozvkcMF-yMAseWsVVmXrIaQg6-A-MY58/little+turtle+side+2.jpg" data-image="https://images.squarespace-cdn.com/content/v1/5f041b669538b147e0e24a89/1594499833340-MHG0W4TM81GKYWZ9MRXZ/ke17ZwdGBToddI8pDm48kGS78un_bcNZLY1QrfTmegV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmmzJBBHkqvGAibxByi2-xi1RoNc7vr9m3ozvkcMF-yMAseWsVVmXrIaQg6-A-MY58/little+turtle+side+2.jpg" data-image-dimensions="1440x1440" data-image-focal-point="0.5,0.5" alt="little turtle side 2.jpg" data-load="false" class="grid-image-hover" data-parent-ratio="1.0" style="width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover;" data-image-resolution="500w" src="https://images.squarespace-cdn.com/content/v1/5f041b669538b147e0e24a89/1594499833340-MHG0W4TM81GKYWZ9MRXZ/ke17ZwdGBToddI8pDm48kGS78un_bcNZLY1QrfTmegV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmmzJBBHkqvGAibxByi2-xi1RoNc7vr9m3ozvkcMF-yMAseWsVVmXrIaQg6-A-MY58/little+turtle+side+2.jpg?format=500w">
            </div>
        </figure>
        <section class="grid-meta-wrapper" data-animation-role="content">
          <div class="grid-main-meta">
            <div class="grid-title">"A Day In The Weeds" Original</div>
            <div class="grid-prices">
              <div class="product-price">
                <span class="sqs-money-native">200.00</span>
              </div>
            </div>
          </div>
          <div class="grid-meta-status">
            <div class="product-mark sold-out">sold out</div>
          </div>
        </section>
        <a href="/originals/a-day-in-the-weeds" aria-label="" a="" day="" in="" the="" weeds"="" original"="" class="grid-item-link"></a>
      </div>
      <div class="grid-item hentry category-in-the-weeds tag-all author-jessica-cecil post-type-store-item article-index-13 sold-out sqs-product-quick-view-button-hover-area is-loaded" id="thumb-a-day-in-the-weeds" data-item-id="5f07db9ded80fa4741aad1ac" data-controller="ProductListImageLoader" data-controllers-bound="ProductListImageLoader">
        <figure class="grid-image" data-animation-role="image">
          <div class="list-quick-view-wrapper sqs-product-quick-view-button-wrapper">
            <span class="sqs-product-quick-view-button" role="button" tabindex="0" data-id="5f07db9ded80fa4741aad1ac" data-group="5f07356969f7521d85f233ad">Quick View</span>
          </div>
          <div class="grid-image-wrapper has-hover-img">
            <img data-src="https://static1.squarespace.com/static/5f041b669538b147e0e24a89/5f07356969f7521d85f233ad/5f07db9ded80fa4741aad1ac/1594514045774/little+turtle+styled.jpg" data-image="https://static1.squarespace.com/static/5f041b669538b147e0e24a89/5f07356969f7521d85f233ad/5f07db9ded80fa4741aad1ac/1594514045774/little+turtle+styled.jpg" data-image-dimensions="1440x1440" data-image-focal-point="0.5,0.5" alt="&quot;A Day In The Weeds&quot; Original" data-load="false" class="grid-image-cover" data-parent-ratio="1.0" style="width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover;" data-image-resolution="500w" src="https://static1.squarespace.com/static/5f041b669538b147e0e24a89/5f07356969f7521d85f233ad/5f07db9ded80fa4741aad1ac/1594514045774/little+turtle+styled.jpg?format=500w">
            <img data-src="https://images.squarespace-cdn.com/content/v1/5f041b669538b147e0e24a89/1594499833340-MHG0W4TM81GKYWZ9MRXZ/ke17ZwdGBToddI8pDm48kGS78un_bcNZLY1QrfTmegV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmmzJBBHkqvGAibxByi2-xi1RoNc7vr9m3ozvkcMF-yMAseWsVVmXrIaQg6-A-MY58/little+turtle+side+2.jpg" data-image="https://images.squarespace-cdn.com/content/v1/5f041b669538b147e0e24a89/1594499833340-MHG0W4TM81GKYWZ9MRXZ/ke17ZwdGBToddI8pDm48kGS78un_bcNZLY1QrfTmegV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmmzJBBHkqvGAibxByi2-xi1RoNc7vr9m3ozvkcMF-yMAseWsVVmXrIaQg6-A-MY58/little+turtle+side+2.jpg" data-image-dimensions="1440x1440" data-image-focal-point="0.5,0.5" alt="little turtle side 2.jpg" data-load="false" class="grid-image-hover" data-parent-ratio="1.0" style="width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover;" data-image-resolution="500w" src="https://images.squarespace-cdn.com/content/v1/5f041b669538b147e0e24a89/1594499833340-MHG0W4TM81GKYWZ9MRXZ/ke17ZwdGBToddI8pDm48kGS78un_bcNZLY1QrfTmegV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmmzJBBHkqvGAibxByi2-xi1RoNc7vr9m3ozvkcMF-yMAseWsVVmXrIaQg6-A-MY58/little+turtle+side+2.jpg?format=500w">
            </div>
        </figure>
        <section class="grid-meta-wrapper" data-animation-role="content">
          <div class="grid-main-meta">
            <div class="grid-title">"A Day In The Weeds" Original</div>
            <div class="grid-prices">
              <div class="product-price">
                <span class="sqs-money-native">200.00</span>
              </div>
            </div>
          </div>
          <div class="grid-meta-status"></div>
        </section>
        <a href="/originals/a-day-in-the-weeds" aria-label="" a="" day="" in="" the="" weeds"="" original"="" class="grid-item-link"></a>
      </div>
      <div id='test-button' style="cursor:pointer;margin-top:100px;width:100%;text-align:center;">
        click here!
      </div>
    </div>
  </body>
</html>

Answer 2

对于简单的解决方案，最初你可以在图像顶部和底部的两个位置写两个元素（我的意思是“SOLD OUT”文本）。根据您的需要编写隐藏元素的条件。

要隐藏元素，只需向该元素添加“隐藏”class。

例如：

<p class="top hide">SOLD OUT</p>
// image 
<p class="bottom">SOLD OUT</p>

JQuery :

if(condition)
{
$(".bottom").addClass("hide");
$(".top").removeClass("hide");
}
else{
$(".bottom").removeClass("hide");
$(".top").addClass("hide");
}

如何删除 div 并将其粘贴到另一个 div

How to remove a div and paste it into another div

javascript

html

jquery

dom

squarespace