需求:遍历选框元素的时候,获取子元素的一些属性,并给一些逻辑操作,比如符合要求的选中,特此记录一下,经常都是不长记性,明明写过的,但是下次还是要线上断点看看或者log看看,基础不扎实,就只有多记录
效果图如下
- html,一个下拉框
<ul class="selectList" >
<li><input value='当前价11' type='checkbox' data-value="1"><span>当前价</span></li>
<li><input value='当前价12' type='checkbox'data-value="2"><span>当前价111</span></li>
<li><input value='当前价13' type='checkbox' data-value="3"><span>当前价222</span></li>
</ul>
1、jq方法获取到input集合,在进行循环input集合,拿到单个input
-
let lis = this.el.find(`.from div.${id} li input`)//获取到input集合 let data = id=='level1'?this.data.value:this.data.value1;//根据tab获取当前要用的数据 for(let i of lis){//循环input集合 //i是单个input,(重点)原生js形式,获取值得方法就是i.value if (data.includes(i.value))i.checked = true }
拿到的input集合
循环拿到的单个input,知道拿到的是原生js还是JQ形式就好获取需要的值了
2、原生方法循环
let arr1=['当前价11','当前价12','当前价22331']
let lis = document.getElementsByTagName('li')//元素集合
function init(){
for(let i of lis){//input在li下面 i.children[0]
console.log('iiiiiiii',i,i.children[0],i.children[0].value)
//如果在数组里能够匹配到,说明这个框要选中
if (arr1.indexOf(i.children[0].value)!=-1)i.children[0].checked = true
}
}
原生js方法拿到的当前li集合,也可以获取input,不过要看好需不需要精准到哪个父级下的input,不然弄一些无关的元素进来也增加了麻烦
循环原生的li集合,拿到单个li后,再获取子集的input即就是 i.children[0],
console.log('iiiiiiii',i,i.children[0],i.children[0].value)如下
这些不是什么难点技术,就记录一下循环元素集合,拿到某一类元素的一些属性做一些操作