jQuery 同时获取多个标签的指定内容并储存为数组

简介: jQuery 同时获取多个标签的指定内容并储存为数组

在网页开发中经常会碰到获取同种类型的 标签 的值得问题,比如下面的两种情况.

当需要批量获取同种标签的指定值时,新人就会碰上一点小麻烦.

比如 id=problem1的demo

1. var list1=$("#problem1").children();//获取到problem1指定的对象数组

2. console.log(list1);//打印到控制台

 

 

控制台中输出的跟我们想象中的是一样的.那么接下来看下一段代码

1. 12 var list1=$("#problem1").children().html();
2. console.log(list1);

 

 

根据上面的内容,新人就会认为list是一个 储存的每个li对象中的值得数组

但控制台的输出结果为:

只输出了第一个li中的内容,新人(我)在这里就懵逼了(想不通),为什么跟想象中的完全不同

经过查阅各种资料,最终找到了问题所在:

此时的list1的数组中

每个元素已经不是'li'对象,如此运行控制台会报错:

这里想要达到我们的目的必须要用到

JQuery中的each()方法:

each() 方法为每个匹配元素规定要运行的函数。

语法

$( selector ).each(function (index,element) )

所以我们采用以下方式获取到我们所需要的内容

1. var array=new Array();//声明一个新的数组 

2. 

3. var list1=$("#problem1").children().each(function (index,element) {

4. //遍历每个对象   

5. array.push($(this).html());

6. //往数组中存入值

7. }); 

8. console.log(array);

 

 

我们想要达到的目的便实现了.

下面是完整的demo:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8"/>

  <meta http-equiv="X-UA-Compatible"content="IE=edge">

  <title>demo</title>

  <meta name="viewport"content="width=device-width, initial-scale=1">

</head>

<body>

  <!-- 第一种 -->

  <ul id="problem1">

    <li>要获取的内容1</li>

    <li>要获取的内容2</li>

    <li>要获取的内容3</li>

    <li>要获取的内容4</li>

    <li>要获取的内容5</li>

  </ul>

  <!-- 第二种 -->

  <ul id="problem2">

    <li> <span>类型:</span>

      <div>要获取的内容2</div>

    </li>

    <li> <span>类型:</span>

      <div>要获取的内容3</div>

    </li>

    <li> <span>类型:</span>

      <div>要获取的内容4</div>

    </li>

    <li> <span>类型:</span>

      <div>要获取的内容5</div>

    </li>

    <li> <span>类型:</span>

      <div>要获取的内容6</div>

    </li>

  </ul>

</body>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>

<script>

  vararray = newArray();//声明一个新的数组

  varlist1 = $("#problem1").children().each(function(index, element) {//遍历每个对象

    array.push($(this).html());//往数组中存入值

  });

  console.log(array);

  vararray2 = newArray();

  varlist2 = $("#problem2").children().children('div').each(function(key, val) {

    array2.push($(this).html());

  })

  console.log(array2);

</script>

</html>

查看前端面试题小程序, MST题库

WX搜索 【MST题库】小程序查看

相关文章
|
6月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery:数组遍历和事件】
Javascript知识【jQuery:数组遍历和事件】
|
5月前
|
JavaScript
jQuery判断是否为对象或者数组
jQuery判断是否为对象或者数组
|
5月前
|
JSON JavaScript 数据格式
jQuery将数组转化成对象
jQuery将数组转化成对象
19 0
|
5月前
|
JavaScript 前端开发
JQuery 获取选中多选框的value,合并成数组传给后台
JQuery 获取选中多选框的value,合并成数组传给后台
22 0
|
5月前
|
JavaScript 前端开发 数据处理
jQuery数据结构渲染(1):图片数组的渲染
jQuery数据结构渲染(1):图片数组的渲染
38 1
|
5月前
|
存储 JavaScript 前端开发
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
44 1
|
5月前
|
JavaScript Java
jQuery点击checkbox选择标签到指定的位置
jQuery点击checkbox选择标签到指定的位置
28 0
|
5月前
|
JSON JavaScript 前端开发
JQuery数组遍历 - $.each(),$().each()和forEach()
JQuery数组遍历 - $.each(),$().each()和forEach()
50 0
|
8月前
|
JavaScript 前端开发
前端——使用jQuery给a标签添加、修改href链接
前端——使用jQuery给a标签添加、修改href链接
|
JavaScript 前端开发
【前端】用jquery或js获取select标签中选中的option值及文本
用jquery或js获取select标签中选中的option值及文本
1092 0