jquery 循环each简单实例和 parent 查找父元素的实例

最新推荐文章于 2023-01-17 16:36:40 发布

原创最新推荐文章于 2023-01-17 16:36:40 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文详细解析了jQuery中的元素操作方法，包括隐藏指定元素、隐藏元素的父元素，以及使用each方法遍历元素集合。同时，介绍了jQueryeach的用法，并通过实例展示了如何使用each方法遍历数组和jQuery选择器。

下面的方法是隐藏：src属性为"wenbin.jpg" 的元素

$(function ()
    {
                $("img").each(function ()
                {
                    if (($(this).attr("src")) == "wenbin.jpg")
                    {
                        $(this).hide();
                    }
                });
    });

下面的代码是隐藏：id为jy的元素的父元素

 $("#jy").parent().css("display", "none");

或者$("#jy").parent().hide();//这行代码我没测试，自己忽然间想到的

通过上面来总结一下jquery中的用法，我所看到的只要是用在$("#id")或者是其他jquery选择器，后面跟着的都是方法，即都是带括号的函数。

jquery each用法

 $(function()
    {
        var arr1 = ["aaa", "bbb", "ccc"];
        $(arr1).each(function(id, val)
        {
            alert(id);
            alert(val);
        });
    });

也可以使用下面的这种方法

 var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);   
      alert(val);
  });

个人比较喜好第一种方法，因为跟其他的用法都是差不多的，都是$("元素id或者class等”).each(function(id,val){......});

each可以接带参数的function也可以接不带参数的function，如下是不带参数的function

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="js/jquery.min.js" type="text/javascript"></script>
<a href="http://www.baidu.com">百度</a>
<a href="http//www.google.com.cn">谷歌</a>
<a href="http://www.yahoo.com">雅虎</a>
</head>
<body>
</body>

<script type="text/javascript">
    $(function()
    {
        $("a").each(function()
        {
            alert($(this).attr("href"));
            alert($(this).text());
        });
    });
</script>

</html>