遍历标签集合方法

需求：遍历选框元素的时候，获取子元素的一些属性，并给一些逻辑操作，比如符合要求的选中，特此记录一下，经常都是不长记性，明明写过的，但是下次还是要线上断点看看或者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)如下

 

 

这些不是什么难点技术，就记录一下循环元素集合，拿到某一类元素的一些属性做一些操作