jQuery对象查找


DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>16_筛选_查找孩子-父母-兄弟标签title>
head>
<body>
<div id="div1" class="box" title="one">class为box的div1div>
<div id="div2" class="box">class为box的div2div>
<div id="div3">div3div>
<span class="box">class为box的spanspan>
<br/>
<div>
  <ul>
    <span>span文本1span>
    <li>AAAAAli>
    <li title="hello" class="box2">BBBBBli>
    <li class="box" id='cc'>CCCCCli>
    <li title="hello">DDDDDDli>
    <li title="two"><span>span文本2span>li>
    <span>span文本3span>
  ul>
  <span>span文本444span><br>
  <li>eeeeeli>
  <li>EEEEEli>
  <br>
div>


<script src="js/jquery-1.10.1.js" type="text/javascript">script>
<script type="text/javascript">
  /*
   需求:
   1. ul标签的第2个span子标签
   2. ul标签的第2个span后代标签
   3. ul标签的父标签
   4. id为cc的li标签的前面的所有li标签
   5. id为cc的li标签的所有兄弟li标签
   */
  var $ul = $('ul')
  //1. ul标签的第2个span子标签
   $ul.children('span:eq(1)').css('background', 'red')

  //2. ul标签的第2个span后代标签
    $ul.find('span:eq(1)').css('background', 'red')

  //3. ul标签的父标签
   $ul.parent().css('background', 'red')

  //4. id为cc的li标签的前面的所有li标签
  var $li = $('#cc')
  // $li.prevAll('li').css('background', 'red')

  //5. id为cc的li标签的所有兄弟li标签
  $li.siblings('li').css('background', 'red')
script>
body>
html>