$(' ')[n]选择第几个js元素和:nth-child(n)比较分析及判断有无兄弟元素

一、html代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p class="active">第1个p元素</p>
  <p>第2个p元素</p>
  <p>第3个p元素</p>
</div>
<p>第4个p元素</p>
<p>第5个p元素</p>

二、js代码

$('div').on('click','p',function(){

  //$('div p')[1]指的是第2个js对象（下标从0开始），再加上一个$()转化成jquery对象
  var a = $($('div p')[1]).text();
  //输出结果：第2个p元素
  console.log("a = "+a);

  //$('div p:nth-child(2)')指的是第2个jq对象，下标从1开始计算
  var b = $('div p:nth-child(2)').text();
  //输出结果：第2个p元素
  console.log("b = "+b);
  
  //当前点击的元素的下标
  var index = $(this).index();
  //下标从0开始计算
  console.log("当前点击的是第"+index+"个元素！");
  
  //查找class为active的元素的哥哥元素
  var prev = $('div .active').prev();
  //结果输出0
  console.log("有无哥哥元素（有长度为1，没有长度为0）:"+prev.length);
  
  //查找class为active的元素的弟弟元素
  var next = $('div .active').next();
  //结果输出1
  console.log("有无弟弟元素（有长度为1，没有长度为0）:"+next.length);
  
})