jquery - 从多个li中选择同一个孩子
问题描述
我已经从 ul 和 li 列表中构建了表格。我现在想通过更改所有行内 li 的类来切换 li“单元格”的类,但来自多个 div 的同一个子项,以便给出高亮行的样式。
- 单击 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>
推荐阅读
- delphi - 即使设置了 SslOptions,我仍然会遇到“Socket Error # 10054 Connection reset by peer”。在 Indy 中使用 TIdHTTP 从 https url 获取
- javascript - 期望一个赋值或函数调用,而是在反应中看到一个表达式 @typescript-eslint/no-unused-expressions
- angular - 拦截发往外部服务器的 HTTPS 请求
- flutter - 我可以自定义带有背景的 TextField suffixIcon 吗?
- java - 仅在 Spring 应用程序的第一次启动时运行某些方法的最佳方法是什么?
- json - 对传感器数据数组进行分组和映射
- c - 如何在 Linux 上查看 main 之前的调用堆栈
- python - 覆盖模块在运行时未选择已安装的模块(通过轮文件安装的第三方模块)
- typescript - 在使用 node.js 的 monorepo 中如何使事情正常进行?
- python - 将文本文件导入 python 列表中每个项目都有 \n 。如何在导入期间从每个项目中删除 \n?