jQuery的parent和parents(找到某一特定的祖先元素)的用法

September 23, 2018 16:59
访问量:236
<!--
parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
parent取得很明确就是当前元素的父元素
parents则是当前元素的祖先元素
-->

<html>
<head></head>
    <body>
        <div id="div1">
            <div id="div2"></div>
            <div id="div3" class="a"></div>
            <div id="div4"></div>
        </div>
    </body>

    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $("p").parent();              //取得的是div2、div3、div4
        $('p').parent('.a');        //取得是div3
        $('p').parent().parent();    //取得是div1(这点比较奇特,不过Jquery对象本身的特点决定了这是可行的)
        $('p').parents();            //取得的是div1、div2、div3、div4
        $('p').parents('.a');        //取得的是div3
    </script>
</html>

    <body>
        <table>
            <tr>
                <td><input id="btn1" class="btn" type="button" value="test"/></td>
                <td>some text</td>
            </tr>
        </table>
    </body>

    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#btn1").click(function(){
        alert($(this).parent().next().html());
        });
    });
    </script>

打印结果:some text

其中:

  • 1、this.parent() 获取的是input前面的td;

  • 2、this.parent().parent() 获取的是tr;

  • 3、this.parent().parent().parent() 获取的是table;

  • 4、this.parent().next() 获取的是input前面的td相邻的另一个td。

另一个例子中:

<div>

Hello

Hello

</div>

$('p').parent() 得到的是:<div>

Hello

Hello </div>对象,因为p标签的父标签是div

 <div id="one">
   <div id="Two">hello</div>
      <div id="Three">
          <p>[tonsh](#)</p
      </div>
   </div>
  • $("a").parent() 将会得到父对象<p>
  • $("a").parents() 得到父对象<p><div.3><div.1>
  • $("a").parents().filter("div") 将得到<div.3><div.1> 还可以写成$("a").parents("div")。

如果想得到<div.2>对象可以写成这样:$("a").parents("div:eq(0)")。

如果点击<a>链接时弹出<div.2>中的内容该怎么办?

var id=$("a").parents("div:eq(1)").children("div:eq(0)").html();

alert(id);


<div>
  <div>
    <samp>
      “第一个代码块”
    </samp>
  </div>
  <div>
    <samp>
      “第二个代码块”
    </samp>
  </div>
</div>

现在要给每一个samp的第一个父亲添加一段css, 实现方式如下:

      $("samp").each(function(index, dom) {
        $(dom).parents("div:eq(0)").css({
          "background-color": "rgba(1, 13, 21, 0.83)",
          "color": "#e7e5e5",
          "font-size": "18px",
          "border-radius": "8px",
          "padding": "15px"
        })
      });

这里需要对每一个samp的dom进行操作。

评论

暂无相关评论,快来抢占沙发吧!
评论框离家出走了,点击找回!
昵称
邮箱
网站
昵称
邮箱
网站