Jquery遍历

课程目的

  • 熟练使用jquey遍历、查找元素

课程内容

常用的遍历函数

<div class="c">
    <div class="d1">睡觉</div>
    <div class="d1">工作</div>
    <div class="d1 d2">
        <div class="e1">aaa</div>
        <div class="e1">bbb</div>
        <div class="e2">ccc</div>
    </div>
    <div class="d3">d3</div>
</div>
.children()

获取元素的子元素

// children
console.log( $('.c').children() );
.each()

遍历选择器元素

// each
$('.e1').each(function(){
    console.log($(this).text());
});
$('.e1').each(function(idx, el){
    console.log(idx + ":");
    console.log( $(el).text() );
});

.find()

查找子元素

//find
var $c = $('.c'),
    $es = $c.find('.e1');
$es.on('click', function(){
    console.log($(this).text());
});

.parent() .parents

parent()查找父亲, parents(selector)从祖先里查找

//parent parents
var $e2 = $('.e2');
console.log($e2.parent());
console.log($e2.parents('.c'));

prevAll()

获取自己前面的邻居

//prevAll
console.log($e2.prevAll());

siblings()

获取自己的邻居

//sibilings
console.log($('.d3').siblings());