今天看啥
热点:

使用js或者jquery查找父元素、子元素经常遇到。可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多

 

这里jquery向上查找父元素 用到的方法:closest() parents() parent()

向下查找子元素 用到的方法:find() children()

js用的是 children[] 属性


html代码

 




段落1 查找父元素

11closest()向上查找最近的元素(返回零个或一个元素的 jQuery 对象)
21parent()方法
31parent(选择器)方法

段落2 查找子元素

查找table2的td find()方法
查找table2的td children()方法
js的children[]属性来查找
tbody2222

 

<script type=text/javascript src=./js/jquery-1.7.2.js></script>
<script>

$(function(){
	/************       查找父元素         *************/
	//closest()方法
    $(#mytd1).bind(click,function(){   
        //alert($(this).html());
        alert($(this).closest(table).attr(id));   //table1而不是table0
    	//alert($(this).closest(table).html());
    });   
    
	//parent()方法
    $(#mytd2).bind(click,function(){   
        //alert($(this).html()); 		//$(this).html()是21   (this).attr(id)是mytd2
        alert($(this).parent().parent().parent().attr(id));
       //.parent()是tr    第二个.parent是tbody。即使没有tbody标签,找到的也是tbody   第三个.parent()是table
        
       //document.write(第一个parent的id: + $(this).parent().attr(id) + 。        第二个parent的id是:+$(this).parent().parent().attr(id) + 。      第三个parent的id是:+$(this).parent().parent().parent().attr(id));
        
    }); 
    
	//parent(选择器)   parents(选择器)
    $(#mytd3).bind(click,function(){   
    	$(p).parent(#div1).css(background, yellow);//这里换成了p标签。不知道为什么用this找不到元素
    	//alert($(this).parent(#div).attr(id));//undefined
    	alert($(this).parents(div).attr(id));//div1   注意一个parent parents
    });
    
    
    /************       查找子元素         *************/
    //查找table2的td元素      find()
    $(#sectd1).bind(click,function(){
    	alert($(#table2).find(td).length);
    	/* $(#table2).find(td).each(function(index,element){
    		alert($(element).text());
    	}); */
    });
    
    //children()
    $(#sectd2).bind(click,function(){
    	var table = $(#table2);
    	alert($(#table2).children().children().children(td[id='sectd2']).html());
    	//children() 是 tbody      children()是 tr   children(td[id='sectd2'])是td
    });
    
    
  // js的 children[]
    $(#sectd3).bind(click,function(){
    	var table = document.getElementById(table2);
    	alert(table.children[0].children[2].children[0].innerHTML);
    	//children[0] 是 tbody      children[2]是 第三行的tr   children[0]是td
    });
    
}); 

</script>


 

www.bkjia.comtruehttp://www.bkjia.com/Javascript/735462.htmlTechArticle使用js或者jquery查找父元素、子元素经常遇到。可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查...

相关文章

相关搜索: 元素 查找 jquery

帮客评论

视觉看点