我已经从ul和li列表中构建了表格。我现在想切换li“ cells”的类，但要从多个div切换同一个孩子，以便通过更改所有in列的类来给行设置样式。
在所有列表中单击相同的li子的li子更改类
悬停在所有列表中相同li子的li子更改类上
影响点击和悬停时突出显示“行”。
请参阅下面的基本概述以了解清楚。
我的密码
$("#cell").hover(function() {
(".cd-features-list li").addClass("cellHover");
});
$("#cell").click(function() {
(".cd-features-list li").addClass("cellClick");
}); .cellHover {
background: #888;
) .cellClick {
background: #111;
)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cd-products-table">
<div class="features">
<div class="top-info">Models</div>
<ul class="cd-features-list">
<li>Programme Type</li>
<li>Completion speed</li>
<li>Visa Coverage</li>
<li>Investment Type</li>
<li>Min. Investment</li>
<li>Family included</li>
<li>Family entitlements</li>
<li>PR time frame</li>
<li>Citizenship time frame</li>
<li>Annual min. stay</li>
</ul>
</div>
<!-- .features -->
<div class="cd-products-wrapper">
<ul class="cd-products-columns">
<li class="product">
<div class="top-info">
<img src="/images/flags/portugal-flag.svg" alt="product image" height="100" width="230">
<h3>Portugal</h3>
<br>
<div class="check"></div>
</div>
<!-- .top-info -->
<ul class="cd-features-list">
<li>xxxxxxx</li>
<li class="rate"><span>5/5</span></li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
</ul>
</li>
<!-- .product -->
<li class="product">
<div class="top-info">
<img src="/images/flags/british-flag.svg" alt="product image" height="100" width="230">
<h3>United Kingdom</h3>
<br>
<div class="check"></div>
</div>
<!-- .top-info -->
<ul class="cd-features-list">
<li>xxxxxxx</li>
<li class="rate"><span>5/5</span></li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxxs</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>1 xxxxxxx</li>
<li>3 xxxxxxx</li>
<li>1 xxxxxxx</li>
</ul>
</li>
<!-- .product -->
<li class="product">
<div class="top-info">
<img src="/images/flags/cypriot-flag.svg" alt="product image" height="100" width="230">
<h3>Cyprus</h3>
<br>
<div class="check"></div>
</div>
<!-- .top-info -->
<ul class="cd-features-list">
<li>xxxxxxx</li>
<li class="rate"><span>5/5</span></li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li> xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>1 xxxxxxx</li>
<li>3 xxxxxxx</li>
<li>1 xxxxxxx</li>
</ul>
</li>
<!-- .product -->最佳答案
在此处使用此jsfiddle
$( ".cd-features-list > li" ).hover(
function() {
var u=$(this).parent('ul');
$(u).addClass("cellHover");
}, function() {
var u=$(this).parent('ul');
$(u).removeClass("cellHover");
}
);
$( ".cd-features-list li" ).click(function() {
var u=$(this).parent('ul');
$(u).addClass("cellClick");
}
); .cellHover {
background-color: #666666;
}
.cellClick {
background: #111;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cd-products-table">
<div class="features">
<div class="top-info">Models</div>
<ul class="cd-features-list">
<li>Programme Type</li>
<li>Completion speed</li>
<li>Visa Coverage</li>
<li>Investment Type</li>
<li>Min. Investment</li>
<li>Family included</li>
<li>Family entitlements</li>
<li>PR time frame</li>
<li>Citizenship time frame</li>
<li>Annual min. stay</li>
</ul>
</div>
<!-- .features -->
<div class="cd-products-wrapper">
<ul class="cd-products-columns">
<li class="product">
<div class="top-info">
<img src="/images/flags/portugal-flag.svg" alt="product image" height="100" width="230">
<h3>Portugal</h3>
<br>
<div class="check"></div>
</div>
<!-- .top-info -->
<ul class="cd-features-list">
<li>xxxxxxx</li>
<li class="rate"><span>5/5</span></li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
</ul>
</li>
<!-- .product -->
<li class="product">
<div class="top-info">
<img src="/images/flags/british-flag.svg" alt="product image" height="100" width="230">
<h3>United Kingdom</h3>
<br>
<div class="check"></div>
</div>
<!-- .top-info -->
<ul class="cd-features-list">
<li>xxxxxxx</li>
<li class="rate"><span>5/5</span></li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxxs</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>1 xxxxxxx</li>
<li>3 xxxxxxx</li>
<li>1 xxxxxxx</li>
</ul>
</li>
<!-- .product -->
<li class="product">
<div class="top-info">
<img src="/images/flags/cypriot-flag.svg" alt="product image" height="100" width="230">
<h3>Cyprus</h3>
<br>
<div class="check"></div>
</div>
<!-- .top-info -->
<ul class="cd-features-list">
<li>xxxxxxx</li>
<li class="rate"><span>5/5</span></li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li> xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>xxxxxxx</li>
<li>1 xxxxxxx</li>
<li>3 xxxxxxx</li>
<li>1 xxxxxxx</li>
</ul>
</li>关于jquery - 从多个li中选择相同的 child ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53136808/