使用jQuery为每个video标签更新对应子div的poster属性值

需求：为每个.video_block下的video标签，利用其同级的.posterURL元素的data-poster属性值，更新video的poster属性。

原jQuery代码：

$(document(){
    $('.video_block .posterURL').each(function() {
        var poster = $(this).data("poster")
        $(.video_block video).attr('poster', poster);
    })
})

原HTML结构：

<div class="container">
    <div class="media_block">

        <div class="video_block">
            <video
            controls
            src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
            width="620">
            </video>

            <div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
        </div>

        <div class="video_block">
            <video
            controls
            src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
            width="620">
            </video>

            <div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
        </div>

        <div class="video_block">
            <video
            controls
            src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
            width="620">
            </video>

            <div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
        </div>
    </div>
</div>

原代码存在几个关键问题：

• 文档就绪函数语法错误：$(document(){是错误写法，正确的文档就绪函数应为$(document).ready(function(){，或更常用的简写$(function(){。
• 选择器错误：$(.video_block video)缺少引号包裹，正确写法是$('.video_block video')；更重要的是，这个选择器会选中所有.video_block下的video元素，导致每次循环都会把所有video的poster覆盖为当前遍历的.posterURL值，最终所有video都会被设置成最后一个.posterURL的data-poster值。应精准定位到当前.posterURL的同级video，可使用siblings('video')或prev('video')实现。
• 语法不严谨：变量声明后缺少分号，虽JavaScript允许自动分号插入，但手动添加分号是更规范的编码习惯。

基础修正版 #

$(function(){
    $('.video_block .posterURL').each(function() {
        var poster = $(this).data("poster");
        // 选择当前.posterURL的同级video元素
        $(this).siblings('video').attr('poster', poster);
    });
})

更高效的遍历方式 #

直接遍历.video_block元素，在每个块内查找对应节点，减少DOM查询次数：

$(function(){
    $('.video_block').each(function() {
        var $block = $(this);
        var poster = $block.find('.posterURL').data('poster');
        $block.find('video').attr('poster', poster);
    });
})

简写链式写法 #

逻辑简单时，可用更简洁的链式调用：

$(function(){
    $('.video_block').each(function() {
        $(this).find('video').attr('poster', $(this).find('.posterURL').data('poster'));
    });
})

内容的提问来源于stack exchange，提问作者Anand Rajagopal