[英]How to convert ul li value into an array format in console with jquery
I have an structure of ul li contains some value,When I check the checkbox of one or multiple child element the value of that particular li should show along with its parent value in below array format in browser console.If I won't select any child,that value or its parent value should not show.Every every thing is working fine but here only problem is that child and its parents also showing for which I have not checked.I have updated the code in plunker https://plnkr.co/edit/koWZabX8OV88opxSDNIv?p=preview , Below is my code 我有一个ul li结构,其中包含一些值,当我选中一个或多个子元素的复选框时,该特定li的值应连同其父值一起在浏览器控制台中以以下数组格式显示。如果我不选择任何子项,该值或其父项值不应该显示。每件事都工作正常,但是这里唯一的问题是,子项及其父项也显示了我尚未检查的内容。我已经更新了代码在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>
[{
"name": "parent1",
"value": ["child11", "child12"]
}, {
"name": "parent2",
"value": []
}, {
"name": "parent3",
"value": []
}]
You can use the function $.text()
to get the text inside of an element. 您可以使用函数
$.text()
来获取元素内部的文本。
This approach finds the parentNav
and then its children using the function $.siblings()
. 此方法使用
$.siblings()
函数找到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>
Putting that approach within your code 将这种方法放在您的代码中
$(".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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.