1. 首页
  2. 问答
  3. 检查每个元素并根据父级（JavaScript/jQuery）对其进行更改

检查每个元素并根据父级（JavaScript/jQuery）对其进行更改

2015-09-04 17 views
0

我有一种情况，我需要根据最接近的父元素的背景，使用.box类来动态更改列表项的背景。如果该父级也具有.gray级别，则将此列表中的跨度元素的当前背景替换为黑色背景，否则将其替换为白色。 我试过这种方法（下面的代码），它返回适量的trues和falses，但if/then part不会工作，它只是替换所有元素中的背景颜色，而不仅仅是在一个列表中。检查每个元素并根据父级（JavaScript/jQuery）对其进行更改

$(document).ready(function() { 
 
\t $('.box-list li span').each(function(){ 
 
\t \t var is_gray = $(this).closest('.box').hasClass('gray'); 
 
\t \t \t console.log (is_gray); 
 
\t \t 
 
\t \t if (is_gray = true) { 
 
\t \t \t $('.box-list li span').css('background', '#999'); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t $('.box-list li span').css('background', '#fff'); 
 
\t \t } 
 
\t }); 
 
});
.box-list { 
 
    list-style: none; 
 
    padding: 0; 
 
    overflow-x: hidden; 
 
\t width: 100%; 
 
} 
 
.box-list li:before { 
 
    float: left; 
 
    width: 0; 
 
    white-space: nowrap; 
 
    content:"· · · · · · · · · · · · · · · · · · · · ""· · · · · · · · · · · · · · · · · · · · ""· · · · · · · · · · · · · · · · · · · · ""· · · · · · · · · · · · · · · · · · · · ""· · · · · · · · · · · · · · · · · · · · " 
 
} 
 
.box-list li span:nth-child(2) { 
 
    float: right; 
 
} 
 
.box-list li { 
 
\t margin: 0 0 10px 0; 
 
} 
 
.box-list li:last-child { 
 
\t margin: 0 !important; 
 
} 
 
.box-list li span { 
 
\t padding: 0 10px; 
 
} 
 
.box { \t 
 
\t padding-right: 3rem; 
 
\t padding-left: 3rem; 
 
\t padding-top: 1.5rem !important; 
 
\t padding-bottom: 3rem !important; 
 
} 
 
.box.gray { 
 
\t background: #efefef !important; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class = "box gray"> 
 
    <div> 
 
    <ul class="box-list"> 
 
     <li> 
 
     <span> 
 
      List item 
 
     </span> 
 
     <span> 
 
      1 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      Another list item 
 
     </span> 
 
     <span> 
 
      2 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      And another one 
 
     </span> 
 
     <span> 
 
      3 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      And one more 
 
     </span> 
 
     <span> 
 
      4 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      Secont to last list item 
 
     </span> 
 
     <span> 
 
      5 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      The last list item 
 
     </span> 
 
     <span> 
 
      6 
 
     </span> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
    
 
<div class = "box"> 
 
    <div> 
 
    <ul class="box-list"> 
 
     <li> 
 
     <span> 
 
      List item 
 
     </span> 
 
     <span> 
 
      1 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      Another list item 
 
     </span> 
 
     <span> 
 
      2 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      And another one 
 
     </span> 
 
     <span> 
 
      3 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      And one more 
 
     </span> 
 
     <span> 
 
      4 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      Secont to last list item 
 
     </span> 
 
     <span> 
 
      5 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      The last list item 
 
     </span> 
 
     <span> 
 
      6 
 
     </span> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

来源

2015-09-04 Vlad

回答

1

我没有得到的jQuery的目的，在这里... 你为什么不使用纯CSS？像

.box .box-list li span { 
    background: white; 
} 
.box.gray .box-list li span { 
    background: gray; 
}

这将工作，除非你想要动态获得父母的背景颜色。在这种情况下，下面的答案也不正确。

如果您的问题是设置在某些特定的情况下（让你不希望这种行为总是）的背景下，我想尝试使用jQuery仅添加/删除一类，即

//click or whatever you expect 
$('#button').click(flagBox); 
function flagBox(){ 
    $('#theBox').addClass('active'); 
}

和CSS

.box.active .box-list li span { 
    background: white; 
} 
.box.active.gray .box-list li span { 
    background: gray; 
}

来源

2015-09-04 14:32:52 sminutoli

0 
if (is_gray = true) {

您使用=代替==。
=指定一个新值，使得if毫无意义。

来源

2015-09-04 13:56:07 Siguza

0

目标应用使用的$(this)代替$('.box-list li span')

$(document).ready(function() { 
 
\t $('.box-list li span').each(function(){ \t \t 
 
\t \t if ($(this).closest('.box').hasClass('gray')) { 
 
\t \t \t $(this).css('background', '#999'); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t $(this).css('background', '#fff'); 
 
\t \t } 
 
\t }); 
 
});
.box-list { 
 
    list-style: none; 
 
    padding: 0; 
 
    overflow-x: hidden; 
 
\t width: 100%; 
 
} 
 
.box-list li:before { 
 
    float: left; 
 
    width: 0; 
 
    white-space: nowrap; 
 
    content:"· · · · · · · · · · · · · · · · · · · · ""· · · · · · · · · · · · · · · · · · · · ""· · · · · · · · · · · · · · · · · · · · ""· · · · · · · · · · · · · · · · · · · · ""· · · · · · · · · · · · · · · · · · · · " 
 
} 
 
.box-list li span:nth-child(2) { 
 
    float: right; 
 
} 
 
.box-list li { 
 
\t margin: 0 0 10px 0; 
 
} 
 
.box-list li:last-child { 
 
\t margin: 0 !important; 
 
} 
 
.box-list li span { 
 
\t padding: 0 10px; 
 
} 
 
.box { \t 
 
\t padding-right: 3rem; 
 
\t padding-left: 3rem; 
 
\t padding-top: 1.5rem !important; 
 
\t padding-bottom: 3rem !important; 
 
} 
 
.box.gray { 
 
\t background: #efefef !important; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class = "box gray"> 
 
    <div> 
 
    <ul class="box-list"> 
 
     <li> 
 
     <span> 
 
      List item 
 
     </span> 
 
     <span> 
 
      1 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      Another list item 
 
     </span> 
 
     <span> 
 
      2 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      And another one 
 
     </span> 
 
     <span> 
 
      3 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      And one more 
 
     </span> 
 
     <span> 
 
      4 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      Secont to last list item 
 
     </span> 
 
     <span> 
 
      5 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      The last list item 
 
     </span> 
 
     <span> 
 
      6 
 
     </span> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
    
 
<div class = "box"> 
 
    <div> 
 
    <ul class="box-list"> 
 
     <li> 
 
     <span> 
 
      List item 
 
     </span> 
 
     <span> 
 
      1 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      Another list item 
 
     </span> 
 
     <span> 
 
      2 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      And another one 
 
     </span> 
 
     <span> 
 
      3 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      And one more 
 
     </span> 
 
     <span> 
 
      4 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      Secont to last list item 
 
     </span> 
 
     <span> 
 
      5 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span> 
 
      The last list item 
 
     </span> 
 
     <span> 
 
      6 
 
     </span> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

来源

2015-09-04 13:57:51 indubitablee

0

你的代码似乎真的慢到我，你看背景色当单个元素，而不是所有的类的那些每个项目，如果它有一个类。 与您的代码工作示例：

var $box = $('.box-list li span'); 
    $box.each(function(){ 
    if($(this).parents('.box').hasClass('gray')) { 
     $(this).css('background', 'grey'); 
    } 
    else { 
     $(this).css('background', 'red'); 
    } 
    });

但如果一个元素有一个孩子，然后添加颜色的所有孩子们似乎更容易和更快检查。

var $box = $('.box') 
    $box.each(function(){ 
    if($(this).hasClass('gray')) { 
     $(this).find('span').css('background', 'grey') 
    } 
    else { 
    $(this).find('span').css('background', 'red') 
    } 
    });

来源

2015-09-04 14:09:22 pictus

相关问题

 相关问题