Как удалить div и вставить его в другой div

Question

Цель:

Я работаю над веб-сайтом в квадратном пространстве, из которого я хочу удалить div и показать его в другом div.

Мои усилия на данный момент:

Я пытался найти решения по приведенным ниже ссылкам SO, но мне это не помогло

• вырезать div и html внутри него и вставьте его в другой div с помощью jquery
• вырезайте и вставьте html в другой элемент
• полностью вырезать и вставить элемент

Я хочу сделать , как показано на изображении ниже:

you can see in the image, as I want to cut the "SOLD OUT" text from the bottom, and want to paste on the top of the image

I am using jQuery for that, my code

var soldList = $('div .grid-meta-status').get();
  var itemsList =  $('div .hentry').get();
  
  for(var i=0; isold out").filter(function( index ) {return $( "div .grid-meta-status" ).text() == "SOLD OUT"}).insertBefore(" .grid-image");
        //$("soldd out").insertBefore(".grid-image");
      
    }
  }

website link https://trumpet-nonagon-ek9j.squarespace.com/originals

Answer 1

Для простого решения: сначала вы можете написать два элемента (я имею в виду текст «ПРОДАНО») в двух местах вверху и внизу изображения. Напишите условие для скрытия элементов в зависимости от ваших потребностей.

Для скрытия элементов просто добавьте к этому элементу класс «скрытия».

Пример:

<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");
} 

Answer 2

Прежде всего, вы должны предоставить более подробную информацию, чтобы получить ответ. Прочтите эту ссылку перед тем, как задать новый вопрос.

Я прикрепил пример макета ниже. В нем два предмета - первый распродан, а второй нет. Коды HTML и CSS скопированы из вашей ссылки, так что вы можете игнорировать это. Важная часть - это код JS. Как вы упомянули, вы используете jQuery, вы можете легко находить и перемещать элементы с помощью селектора запросов jQuery. Мой код пытается найти элемент item, который содержит все метаданные, и оттуда проверяет, продан этот элемент или нет. Затем он выбирает мета 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;
}