javascripthtmljquerydomsquarespace
How to remove a div and paste it into another div
Objective:
I am working on a website on square space, in which I want to remove a div and want to show it into another div.
My effort so far:
I have tried to find solutions from the below SO links, but it didn't help me
- cut a div and html inside it and paste it into a different div with jquery
- cut and paste html to other element
- cut completely and paste an element
What I want to do is, in the image below:
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; 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");
}
}
website link https://trumpet-nonagon-ek9j.squarespace.com/originals
Solution
First of all, you should provide more details to get an answer. Read this link before ask a new question.
I've attached a mock-up example below. It contains two items - the first one is sold out and the second one is not. HTML and CSS codes are copied from your link so you can ignore that. The important part is the JS code. As you mentioned that you're using jQuery, you can easily find and move elements with jQuery query selector. My code tries to find the item element which contains all meta data and from there, it checks whether this item is sold or not. And then, it selects the sold-out meta and moves it to the front. I've added click here! button at the bottom so you can test with this.
I'm not sure this is what you want since the question is ambiguous but I guess you can start from this to get what you want.
$("#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=""A Day In The Weeds" 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=""A Day In The Weeds" 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>- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices