获取填空题的值

问题描述

现在，我的页面是这样的

我需要获取到每个input的值，但是这些input是通过v-html转化字符串过来的

字符串格式是<input class='blank' type='text' style='height:28px'>

于是我尝试用jQuery中的each方法去遍历

$('.blank').each(function (index) {
        console.log(index, $(this).val())
})

但是却出现了下面的这种情况

很莫名其妙的前面会有很多的空格，根本找不到第一题的第一空（后面的好判断，只需要index+1就行）

出现原因（发现原因过程）

最终原因： v-show其实在每个tabs都渲染了，只是display:none了

1.在DOM树中寻找blank

因为我是用的是$(selector).each是对所有DOM树种的css选择器去循环

①在开发者工具（F12打开或右键检查）选中Elements

②ctrl + F输入blank（这是我each的selector）

2.发现好像多了很多东西

明明长度只有56，但是查出来多了很多东西

于是！！！！想到改class名字

更改为

<input class='testBlank' type='text' name='blank' style='height:28px'/>

3.继续寻找testBlank

打印eahc长度

console.log( "each长度" , $('.testBlank').length)

这次数字对上了，继续寻找

4.发现出现了很多个一样的题目

这里明明是radio1的class但是却有blank

发现了这个display:none不显示

v-show：DOM树已经加载好，只是不显示而已

解决办法

在填空题外层，包裹一层div class allBlank

解决代码

$('.allBlank  .testBlank').each(function (index) {
        console.log(index, $(this).val())

        arr.push($(this).val())
      })

相关知识：

css选择器能在父类容器（.allBlank)中，寻找子类容器（testBlank）

---

最后就是因为没有看懂$(selectior)的语法，再加上没有css对应的知识