JQuery查找子元素find()和遍历集合each的方法总结

1.HTML代码

<div name="students" school="HK">
 <input type="boy" name="ZhangSan" value="206">
 <input type="girl" name="Lisi" value="108">
 </div>

 2.jquery

<script type="text/javascript">
 /* find() 查找子元素方法 */
 var aaa = $("div[name='students'][school='HK']").find("input[type='boy'][name='ZhangSan']");
 console.log(aaa.val()); 

 /* $(".child",parent); 方法查找子元素*/
 var bbb = $($("input[type='boy'][name='ZhangSan']"),$("div[name='students'][school='HK']"));
 console.log(aaa.val()); 

 /* each()方法遍历数组 */
 var arr = [ "one", "two", "three", "four" ];
 $.each(arr, function() {
  console.log(this);
 }); 

 /* each()方法处理json */
 var obj = {
  one : 1,
  two : 2,
  three : 3,
  four : 4
 };
 $.each(obj, function(key, val) {
  console.log(obj[key]);
 }); 

 /* each()方法处理二维数组 */
 var arr1 = [ [ 11, 44, 33 ], [ 4, 6, 6 ], [ 7, 20, 9 ] ]
 $.each(arr1, function(i, item) {
  console.log(item[0]);
 }); 

 /* each()方法处理HTML元素 */
 $("div[name='students'][school='HK'] > input").each(function() {
  console.log($(this).val());
 });
 </script>

以上这篇JQuery查找子元素find()和遍历集合each的方法总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Jquery中find与each方法用法实例

    本文实例讲述了Jquery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: $("#id") $("#"+"id") $(this) $(element) 等等,只要灵活运用,就能爆发出强大的可造型. 但是在实际使用中,仍然觉得有些不足. 如果想要在某个元素下寻找特定的元素,仅仅依靠上面这个方法,就必须对 $("

  • jquery 遍历数组 each 方法详解

    JQuery拿取对象的方式 $('#id') :通过元素的id $('tagName') : 通过元素的标签名 $('tagName tagName') : 通过元素的标签名,eg: $('ul li') $('tagName#id): 通过元素的id和标签名 $(':checkbox'):拿取input的 type为checkbox'的所有元素: Eg: <input type="checkbox" name="appetizers" value="

  • jQuery循环遍历子节点并获取值的方法

    本文实例讲述了jQuery循环遍历子节点并获取值的方法.分享给大家供大家参考,具体如下: Html代码部分: <div class="left_tree_ad_btn_container"> <ul> <li class="tree_ad_btn_bg"><img src="/images/insurance/3lianad_small.jpg" /> </li> </ul>

  • jQuery中each()、find()和filter()等节点操作方法详解(推荐)

    1.each(callback) 官方解释: 返回值:jQuery 概述 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素).而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型). 返回 'false' 将停止循环 (就像在普通的循环中使用 'break').返回 'true' 跳至下一个循环(就像在普通的循环中使用'

  • JQuery查找子元素find()和遍历集合each的方法总结

    1.HTML代码 <div name="students" school="HK"> <input type="boy" name="ZhangSan" value="206"> <input type="girl" name="Lisi" value="108"> </div>  2.jquery

  • jquery查找父元素、子元素(个人经验总结)

    使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents() parent() 向下查找子元素 用到的方法:find() children() js用的是 children[] 属性 html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  • jQuery搜索子元素的方法

    jQuery搜索子元素的方法

    本文实例讲述了jQuery搜索子元素的方法.分享给大家供大家参考.具体分析如下: 1. children()方法 用于获取一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,语法格式如下: 复制代码 代码如下: children([selector]) $("#menu_ul").children().css("color", "blue"); 2. find()方法 用于从每个匹配元素中查找符合指定选择器表达式的后代元素,格式如下: 复制

  • jQuery获得子元素个数的方法

    本文实例讲述了jQuery获得子元素个数的方法.分享给大家供大家参考.具体分析如下: //获取id=div1下的子元素的个数 $('#div1').children().length; //获取id=div1下的span元素个数 $('#div1').children('span').length; 希望本文所述对大家的jQuery程序设计有所帮助.

  • Java使用Iterator迭代器遍历集合数据的方法小结

    本文实例讲述了Java使用Iterator迭代器遍历集合数据的方法.分享给大家供大家参考,具体如下: 1.使用迭代器遍历ArrayList集合 package com.jredu.oopch07; import java.util.ArrayList; import java.util.Iterator; import java.util.List; public class Ch05 { public static void main(String[] args) { // TODO Auto

  • jquery取子节点及当前节点属性值的方法

    分享下jquery取子节点及当前节点属性值的方法. <li class="menulink"> <a href="#" rel="external nofollow" id="101" onclick="changeMenu('101','资料管理','#' )"><span>资料管理</span> </a> </li> 取子节点: $

  • jQuery对指定元素中指定字符串进行替换的方法

    本文实例讲述了jQuery对指定元素中指定字符串进行替换的方法.分享给大家供大家参考.具体如下: 这段JS代码可以将指定id的元素内容的字符串进行替换,例如西面的代码将id=content元素中的jb51字符串替换成空字符 html部分如下: <div id=content>welcome to jb51</div> jQuery部分如下: var el = $('#content'); el.html(el.html().replace(/jb51/ig, '')); 希望本文所

  • jquery 取子节点及当前节点属性值的方法

    分享下jquery取子节点及当前节点属性值的方法. <li class="menulink"> <a href="#" rel="external nofollow" id="101" onclick="changeMenu('101','资料管理','#' )"><span>资料管理</span> </a> </li> 取子节点: $

  • C#使用foreach语句遍历集合类型的方法

    本文实例讲述了C#使用foreach语句遍历集合类型的方法.分享给大家供大家参考.具体如下: 这里演示如何实现可与 foreach 语句一起使用的集合类 using System; using System.Collections; public class Tokens: IEnumerable { private string[] elements; Tokens(string source, char[] delimiters) { elements = source.Split(deli

  • 举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历

    一.jQuery的向下遍历 <script src="../JS/Extend.js"></script> <script src="../JS/my.js"></script> <link type="text/css" rel="stylesheet" href="../CSS3/my.css"> </head> <body&

随机推荐