javascript - 如何使用jquery在控制台中将ul li值转换为数组格式
问题描述
我有一个 ul li 的结构包含一些值,当我选中一个或多个子元素的复选框时,该特定 li 的值应在浏览器控制台中以下面的数组格式显示其父值。如果我不选择任何孩子,该值或其父值不应该显示。每件事都工作正常,但这里唯一的问题是孩子及其父母也显示了我没有检查过的。我已经更新了 plunker https://plnkr 中的代码。 co/edit/koWZabX8OV88opxSDNIv?p=preview,下面是我的代码
$(".applybtn").click(function() {
alert('sss');
var getAllList = $('#leftNavBar ul').find('li.childData ul li');
var getAllParents = $('#leftNavBar ul').find('li.parentNav');
var getFilterData = [];
$(getAllParents).each(function() {
getFilterData.push({
name: $(this).text().trim(),
value: []
});
});
$(getAllList).each(function() {
if ($(this).find('input').prop("checked") == true) {
var parent = $(this).closest("ul").closest("li").prev().text().trim();
var getIndex = _.findIndex(getFilterData, ['name', parent]);
var name = $(this).text().trim();
getFilterData[getIndex].value.push(name);
}
});
console.log(JSON.stringify(getFilterData));
});
.parentNav {
background: red;
font-size: 16px
}
.childData {
background: #ccc;
}
.childData ul li {
clear: both;
}
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-3" id="leftNavBar">
<ul>
<li class="parentNav">parent1</li>
<li class="childData">
<ul>
<li>child11<span class="pull-right"><input type ="checkbox"/></span></li>
<li>child12<span class="pull-right"><input type ="checkbox"/></span></li>
</ul>
</li>
</ul>
<ul>
<li class="parentNav">parent2</li>
<li class="childData">
<ul>
<li>child2<span class="pull-right"><input type ="checkbox"/></span></li>
</ul>
</li>
</ul>
<ul>
<li class="parentNav">parent3</li>
<li class="childData">
<ul>
<li>child3<span class="pull-right"><input type ="checkbox"/></span></li>
</ul>
</li>
</ul>
<div class="applybutton"><button class="applybtn" type="button">Appply</button></div>
</div>
json格式输出
[{
"name": "parent1",
"value": ["child11", "child12"]
}, {
"name": "parent2",
"value": []
}, {
"name": "parent3",
"value": []
}]
解决方案
您可以使用该函数$.text()
获取元素内的文本。
这种方法parentNav
使用函数找到 ,然后找到它的子项$.siblings()
。
var obj = [];
$('.parentNav').each(function() {
var childrenLis = $(this).siblings('.childData').find('li');
obj.push({
name: $(this).text(),
value: childrenLis.toArray().map(l => $(l).text())
})
});
console.log(obj);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div class="col-md-3" id="leftNavBar"> <ul> <li class="parentNav">parent1</li> <li class="childData"> <ul> <li>child11<span class="pull-right"><input type ="checkbox"/></span></li> <li>child12<span class="pull-right"><input type ="checkbox"/></span></li> </ul> </li> </ul> <ul> <li class="parentNav">parent2</li> <li class="childData"> <ul> <li>child2<span class="pull-right"><input type ="checkbox"/></span></li> </ul> </li> </ul> <ul> <li class="parentNav">parent3</li> <li class="childData"> <ul> <li>child3<span class="pull-right"><input type ="checkbox"/></span></li> </ul> </li> </ul> <div class="applybutton"><button class="applybtn" type="button">Appply</button></div></div>
将该方法放入您的代码中
$(".applybtn").click(function() {
var getFilterData = [];
$('.parentNav').each(function() {
var childrenLis = $(this).siblings('.childData').find('li');
getFilterData.push({
name: $(this).text(),
value: childrenLis.toArray().map(l => $(l).text())
})
});
console.log(JSON.stringify(getFilterData));
});
.parentNav {
background: red;
font-size: 16px
}
.childData {
background: #ccc;
}
.childData ul li {
clear: both;
}
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-3" id="leftNavBar">
<ul>
<li class="parentNav">parent1</li>
<li class="childData">
<ul>
<li>child11<span class="pull-right"><input type ="checkbox"/></span></li>
<li>child12<span class="pull-right"><input type ="checkbox"/></span></li>
</ul>
</li>
</ul>
<ul>
<li class="parentNav">parent2</li>
<li class="childData">
<ul>
<li>child2<span class="pull-right"><input type ="checkbox"/></span></li>
</ul>
</li>
</ul>
<ul>
<li class="parentNav">parent3</li>
<li class="childData">
<ul>
<li>child3<span class="pull-right"><input type ="checkbox"/></span></li>
</ul>
</li>
</ul>
<div class="applybutton"><button class="applybtn" type="button">Appply</button></div>
</div>
推荐阅读
- javascript - 根据外部 Internet 连接动态更改状态 - React(离线/在线)
- getstream-io - 如何查询所有活跃/在线用户?
- pyqt - PyQt:是否可以在 QGridLayout 中拖放 QWidget 以重新排列它们?
- python - 在 Django 中使用 pk 创建可下载链接
- html - data-block-on-consent="_till_responded" 是否仅适用于放大器组件?
- python - Pandas DataFrame - 迭代
- r - snapPointsToLines 不能在 R 中保留属性
- java - 多模块 maven Vs 微服务架构
- laravel - 具有附加 user_id 字段的唯一验证无效
- ruby-on-rails - rails URL重写使用