Добавление класса в предыдущий div - PullRequest
Новая
       9

Добавление класса в предыдущий div

0 голосов
/ 25 января 2020 

$(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>

Я бы хотел, чтобы div, содержащий класс .disable-hover, был скрыт вместе с предыдущим div с классом .owl-item.

Есть ли такая возможность? 

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

Ответы [ 4 ]

0 голосов
/ 25 января 2020

Если вы хотите использовать чистую 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"
    }
}
0 голосов
/ 25 января 2020

Я публикую этот измененный код для объяснения ответа 

$(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>
0 голосов
/ 25 января 2020

Я не уверен, хотите ли вы достичь этого только с css или jQuery. С css я не знаю о существовании какого-либо предыдущего селекторного элемента для элемента. Если вы хотите использовать jQuery, чтобы скрыть div.owl-элемент, который предшествует div.owl-элементу, содержащему класс div.disable-hover с использованием jQuery, вы можете сделать что-то вроде: 

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' );
0 голосов
/ 25 января 2020

Измените CSS, как показано ниже. это будет работать 

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