时间戳

首页 > 解决方案 > 滚动到最近的具有相同类的 div

javascript - 滚动到最近的具有相同类的 div

问题描述

所以我遇到的问题是让我的脚本正常工作，它会在单击“scrollBtn”时向上滚动到具有“.orangered”类的最近的div。我想要做的是，如果有多个实例，那么它将滚动到最靠近按钮的那个，如果只有一个实例，那么它只会滚动到那个。

我尝试使用不同的 .closest 实例无济于事。

任何人都可以解释一下吗？

干杯。

ps 请原谅我正在处理的遗留代码，因此我在这里包含了一个 CodePen！

代码笔： https ://codepen.io/nickelse/pen/mgZJQJ

$(".product-availability-list").has("span:contains('This quantity of items is currently not available.')").parents('.cart-row').addClass('orangered');

$(".scrollBtn").click(function() {
    $('html, body').animate({
        scrollTop: $('.orangered').offset().top - 10
    }, 500);
});
.orangered { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cart-row">
    <div class="cart-cell item-image">
        <picture>
            <img itemprop="image">
        </picture>
    </div>
	
	<div class="cart-cell item-total">
		<div class="product-extras">
			<div class="product-extra is-mobile item-quantity-details">
				<div class="product-availability-list">
					<span class="not-available-quantity js-cart-product-error" style="display: none;">
						This quantity of items is currently not available.
					</span>
                
					<div class="jsCartStockMsg jsQtyCartStockMsg jsOosFace">
						<span>THIS QUANTITY OF ITEMS IS <strong>NOT AVAILABLE</strong></span>
					</div>
					
					<div class="jsCartQtyMsg">
						<span>PLEASE EDIT THE QUANTITY</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="cart-cell item-quantity-details is-mobile">
		<div class="product-availability-list">
			<div class="jsCartStockMsg jsQtyCartStockMsg jsOosFace">
				<span>THIS QUANTITY OF ITEMS IS <strong>NOT AVAILABLE</strong></span>
			</div>
         
			<div class="jsCartQtyMsg">
				<span>PLEASE EDIT THE QUANTITY</span>
			</div>
   	</div>
	</div>
</div><!-- /.cart-row -->




<div class="cart-row">
    <div class="cart-cell item-image">
        <picture>
            <img itemprop="image">
        </picture>
    </div>
	
	<div class="cart-cell item-total">
		<div class="product-extras">
			<div class="product-extra is-mobile item-quantity-details">
				<div class="product-availability-list">
					<span class="not-available-quantity js-cart-product-error" style="display: none;">
						This quantity of items is currently not available.
					</span>
                
					<div class="jsCartStockMsg jsQtyCartStockMsg jsOosFace">
						<span>THIS QUANTITY OF ITEMS IS <strong>NOT AVAILABLE</strong></span>
					</div>
					
					<div class="jsCartQtyMsg">
						<span>PLEASE EDIT THE QUANTITY</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="cart-cell item-quantity-details is-mobile">
		<div class="product-availability-list">
			<div class="jsCartStockMsg jsQtyCartStockMsg jsOosFace">
				<span>THIS QUANTITY OF ITEMS IS <strong>NOT AVAILABLE</strong></span>
			</div>
         
			<div class="jsCartQtyMsg">
				<span>PLEASE EDIT THE QUANTITY</span>
			</div>
   	</div>
	</div>
</div><!-- /.cart-row -->


<div class="cart-row">
    <div class="cart-cell item-image">
        <picture>
            <img itemprop="image">
        </picture>
    </div>
	
	<div class="cart-cell item-total">
		<div class="product-extras">
			<div class="product-extra is-mobile item-quantity-details">
				<div class="product-availability-list">
					In Stock Item
				</div>
			</div>
		</div>
	</div>
	
	<div class="cart-cell item-quantity-details is-mobile">
		<div class="product-availability-list">
			In Stock Item
		</div>
	</div>
</div><!-- /.cart-row -->














<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>

<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.</p>

<p>Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum.</p>


<div class="scrollBtn">
    Scroll Button
</div>

标签： javascriptjqueryhtml

解决方案

当您将类放在滚动按钮的兄弟姐妹上时，要获得与 orangered 类最近的兄弟姐妹，您可以使用prevAll('.orangered').first()

这将搜索所有以前的兄弟姐妹与类 orangered 并返回给你第一个（这是最接近按钮的）

$(".product-availability-list").has("span:contains('This quantity of items is currently not available.')").parents('.cart-row').addClass('orangered');

$(".scrollBtn").click(function() {
  var scrollPosition = $(this).prevAll('.orangered').first().offset().top - 10;
  $('html, body').animate({
    scrollTop: scrollPosition
  }, 500);
});
.cart-row {
  height: 100vh;
  /* test only */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cart-row">
  <div class="cart-cell item-image">
    <picture>
      <img itemprop="image">
    </picture>
  </div>

  <div class="cart-cell item-total">
    <div class="product-extras">
      <div class="product-extra is-mobile item-quantity-details">
        <div class="product-availability-list">
          <span class="not-available-quantity js-cart-product-error" style="display: none;">
						This quantity of items is currently not available.
					</span>

          <div class="jsCartStockMsg jsQtyCartStockMsg jsOosFace">
            <span>THIS QUANTITY OF ITEMS IS <strong>NOT AVAILABLE</strong></span>
          </div>

          <div class="jsCartQtyMsg">
            <span>PLEASE EDIT THE QUANTITY</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="cart-cell item-quantity-details is-mobile">
    <div class="product-availability-list">
      <div class="jsCartStockMsg jsQtyCartStockMsg jsOosFace">
        <span>THIS QUANTITY OF ITEMS IS <strong>NOT AVAILABLE</strong></span>
      </div>

      <div class="jsCartQtyMsg">
        <span>PLEASE EDIT THE QUANTITY</span>
      </div>
    </div>
  </div>
</div>
<!-- /.cart-row -->




<div class="cart-row">
  <div class="cart-cell item-image">
    <picture>
      <img itemprop="image">
    </picture>
  </div>

  <div class="cart-cell item-total">
    <div class="product-extras">
      <div class="product-extra is-mobile item-quantity-details">
        <div class="product-availability-list">
          <span class="not-available-quantity js-cart-product-error" style="display: none;">
						This quantity of items is currently not available.
					</span>

          <div class="jsCartStockMsg jsQtyCartStockMsg jsOosFace">
            <span>THIS QUANTITY OF ITEMS IS <strong>NOT AVAILABLE</strong></span>
          </div>

          <div class="jsCartQtyMsg">
            <span>PLEASE EDIT THE QUANTITY</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="cart-cell item-quantity-details is-mobile">
    <div class="product-availability-list">
      <div class="jsCartStockMsg jsQtyCartStockMsg jsOosFace">
        <span>THIS QUANTITY OF ITEMS IS <strong>NOT AVAILABLE</strong></span>
      </div>

      <div class="jsCartQtyMsg">
        <span>PLEASE EDIT THE QUANTITY</span>
      </div>
    </div>
  </div>
</div>
<!-- /.cart-row -->


<div class="cart-row">
  <div class="cart-cell item-image">
    <picture>
      <img itemprop="image">
    </picture>
  </div>

  <div class="cart-cell item-total">
    <div class="product-extras">
      <div class="product-extra is-mobile item-quantity-details">
        <div class="product-availability-list">
          In Stock Item
        </div>
      </div>
    </div>
  </div>

  <div class="cart-cell item-quantity-details is-mobile">
    <div class="product-availability-list">
      In Stock Item
    </div>
  </div>
</div>
<!-- /.cart-row -->














<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
  elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>

<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
  sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus
  tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.</p>

<p>Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
  cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.
  Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum.</p>


<div class="scrollBtn">
  Scroll Button
</div>

有关更多信息prevAll()

推荐阅读