Вы можете легко сделать это в других базах данных с помощью рекурсивного запроса (YMMV на производительность).
Другой способ сделать это - сохранить два дополнительных бита данных, левый и правый стоимость. Левое и правое значение получены из предварительного предпросмотра древовидной структуры, которую вы представляете.
Это известно как измененный обход дерева предзаказов и позволяет запускать простой запрос, чтобы получить все родительские значения в один раз. Он также имеет название «вложенный набор».
Во-первых, не отображать div содержат изображение. И после нажатия кнопки отображения его
<div class="product-view" style="display: none">
$("#btnClick").click(function(){
$(".product-view").fadeIn()
});
$(".close-button").click(function(){
$(".product-view").fadeOut()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
<div class = "middle">
<img src = "1g.jpg">
</div>
<div class="on-top">
<button id="btnClick" class="qvbtn"><b>Quick View</b></button>
</div>
</div>
<div class="product-view" style="display: none">
<div class="close-button"> X </div>
<div class="product-big-image">
<img src="1.jpg" >
</div>
<div class="product-big-desc">
<h2>Linen Shirt</h2>
<h5>Produce Code:</h5>
<h5>Brand:</h5>
<div class="price">
<h4 class="OldPrice"><del>150 SAR</del>
<sup>50% off</sup>
</h4> <!--h4 class="NewPrice">75 SAR</h4-->
</div>
</div>
</div>