向前一个 div 添加一个类

Question

$(document).ready(function(){
		$( ".disable-hover" )
    .parents( "div" )
        .addClass( "disable-hover" );
    });
</script>
<script src="https://static.jsbin.com/js/render/edit.js?4.1.7"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"https://static.jsbin.com","root":"https://jsbin.com"});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-1656750-34', 'auto');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');

.gift-product-item.disable-hover { display: none; }
.owl-item{
  border:1px solid;
  padding:2px;
}
 


</script>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-item">
  <div>First div.</div>
</div>
  <div class="owl-item">
    <div class="gift-product-item disable-hover">Second</div>
</div>
<div class="owl-item">
  <div>Third</div>
</div>

我希望包含 .disable-hover 类的 div 与前一个 .owl-item 类的 div 一起隐藏。

有这种可能吗？

jsbin.com/suloyir/edit?html,css,js,output

Answer 1

如果您想使用纯 JavaScript：

const elements = document.getElementsByClassName("disable-hover")
for (const e of elements) {
    if (e.parentNode.className.split(" ").includes("owl-item")) {
        e.parentNode.style.display = "none"
    }
}

Answer 2

我不确定您是否只想使用 css 或 jQuery 来实现。使用 css，我不知道元素的任何先前兄弟选择器的存在。 如果您想使用 jQuery 隐藏 div.owl-item 之前的 div.owl-item 包含使用 jQuery 的 div.disable-hover 类，您可以执行以下操作：

jQuery( '.disable-hover' ).parent().hide().prev().hide();

这将隐藏两个 div，如果您只想隐藏前一个 div（因为其中一个被 css 隐藏），您可以这样简化：

jQuery( '.disable-hover' ).parent().prev().hide();

希望对你有帮助。

帖子编辑后

我看到您需要在编辑后向前一个 div 添加一个类：

// This will add the .disable-hover class to the previous div
jQuery( '.disable-hover' ).parent().prev().addClass( 'disable-hover' );

// This will add the .disable-hover class to the div contained in the previous div
jQuery( '.disable-hover' ).parent().prev().find( 'div' ).addClass( 'disable-hover' );

Answer 3

我发布这个更改的代码来解释答案

$(document).ready(function(){
		$( ".disable-hover" )
    .parents( "div" )
        .addClass( "disable-hover" );
    });
</script>
<script src="https://static.jsbin.com/js/render/edit.js?4.1.7"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"https://static.jsbin.com","root":"https://jsbin.com"});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-1656750-34', 'auto');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');

.gift-product-item.disable-hover,.owl-item.disable-hover { display: none; }
.owl-item{
  border:1px solid;
  padding:2px;
}
 


</script>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-item">
  <div>First div.</div>
</div>
  <div class="owl-item">
    <div class="gift-product-item disable-hover">Second</div>
</div>
<div class="owl-item">
  <div>Third</div>
</div>

Answer 4

如下更改 CSS。这会工作

.gift-product-item.disable-hover,.owl-item.disable-hover { display: none; }
.owl-item{
  border:1px solid;
  padding:2px;
}