使用jquery访问div的路径

我已经找到了一个使用自定义按钮播放和暂停vimeo视频的解决方案，但是我现在已经将按钮放置在一个单独的div中，名为buttonHolder，我似乎无法找到正确的路径来让按钮在自己的div中工作

<div class="buttonHolder">               
    <img class="simple" id="api_play" src="test.jpg" />
                <img class="simple" id="api_pause" src="test.jpg" />
</div>
            </div>
        </div>

        <div>
           <div>
            <h1>Player 2</h1>
            <div class="api_output"></div>
            <iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>

<div class="buttonHolder">
    <img class="simple" id="api_play" src="test.jpg" />
    <img class="simple" id="api_pause" src="test.jpg" />
</div>
        </div>
    </div>

我真的很感激任何帮助

<div class="buttonHolder">               
    <img class="simple" id="api_play" src="test.jpg" />
                <img class="simple" id="api_pause" src="test.jpg" />
</div>
            </div>
        </div>

        <div>
           <div>
            <h1>Player 2</h1>
            <div class="api_output"></div>
            <iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>

<div class="buttonHolder">
    <img class="simple" id="api_play" src="test.jpg" />
    <img class="simple" id="api_pause" src="test.jpg" />
</div>
        </div>
    </div>

我的html是： 玩家1

<div class="buttonHolder">               
    <img class="simple" id="api_play" src="test.jpg" />
                <img class="simple" id="api_pause" src="test.jpg" />
</div>
            </div>
        </div>

        <div>
           <div>
            <h1>Player 2</h1>
            <div class="api_output"></div>
            <iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>

<div class="buttonHolder">
    <img class="simple" id="api_play" src="test.jpg" />
    <img class="simple" id="api_pause" src="test.jpg" />
</div>
        </div>
    </div>

为什么要使用

$（'#'+player_id）.nextAll（'img.simple'）

来查找按钮？这将仅选择第二组按钮。。而且它还不稳定地依赖于页面布局。不太好

<div class="buttonHolder">               
    <img class="simple" id="api_play" src="test.jpg" />
                <img class="simple" id="api_pause" src="test.jpg" />
</div>
            </div>
        </div>

        <div>
           <div>
            <h1>Player 2</h1>
            <div class="api_output"></div>
            <iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>

<div class="buttonHolder">
    <img class="simple" id="api_play" src="test.jpg" />
    <img class="simple" id="api_pause" src="test.jpg" />
</div>
        </div>
    </div>

在“播放器按钮”上使用特定类或包含它们的DIV上的类会更简单

<div class="buttonHolder">               
    <img class="simple" id="api_play" src="test.jpg" />
                <img class="simple" id="api_pause" src="test.jpg" />
</div>
            </div>
        </div>

        <div>
           <div>
            <h1>Player 2</h1>
            <div class="api_output"></div>
            <iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>

<div class="buttonHolder">
    <img class="simple" id="api_play" src="test.jpg" />
    <img class="simple" id="api_pause" src="test.jpg" />
</div>
        </div>
    </div>

// Simple Buttons
//
var buttonClass = 'playerButtons_'+player_id;
var buttons = $('.buttonHolder img.'+buttonClass);
console.log('bind player buttons', buttons);
//
buttons.bind( 'click', {'player_id': player_id}, function(e){
    var iframe = $('#'+e.data.player_id).get(0);
    var action = $(e.target).attr('id');           // FUTURE -- from data('action').
    console.log('player button', iframe, action);
    iframe.api( action, null);
});

“按钮”的两个选择器中的任何一个都应该这样做——第一个更简洁，但与第二个几乎相同。通过id和类工作，如果需要，子体结构比依赖DOM排序更健壮（而且可能更高效）

<div class="buttonHolder">               
    <img class="simple" id="api_play" src="test.jpg" />
                <img class="simple" id="api_pause" src="test.jpg" />
</div>
            </div>
        </div>

        <div>
           <div>
            <h1>Player 2</h1>
            <div class="api_output"></div>
            <iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>

<div class="buttonHolder">
    <img class="simple" id="api_play" src="test.jpg" />
    <img class="simple" id="api_pause" src="test.jpg" />
</div>
        </div>
    </div>

如果不确定发生了什么，请记录

按钮的值（
length
），并记录播放器ID、iframe和“按钮操作”

<div class="buttonHolder">               
    <img class="simple" id="api_play" src="test.jpg" />
                <img class="simple" id="api_pause" src="test.jpg" />
</div>
            </div>
        </div>

        <div>
           <div>
            <h1>Player 2</h1>
            <div class="api_output"></div>
            <iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>

<div class="buttonHolder">
    <img class="simple" id="api_play" src="test.jpg" />
    <img class="simple" id="api_pause" src="test.jpg" />
</div>
        </div>
    </div>

最佳实践还将使您的按钮
，而不仅仅是图像，并且不使用相同的ID值。（使用不同的属性——可能是
名称
，因为它是一个控件，或者
数据操作
，如果您想使用HTML 5。）
如果您可以在发布这么多代码时创建一个JSFIDLE，那将非常有用。给你一个开始。。。HTML中不允许重复ID，您需要修复它。好的，我将使用js Fiddle抱歉，能否在上下文中给出示例。我故意使用图像。我必须附加/。将单击操作绑定到按钮。非常感谢您的代码和想法。但是，现在所有按钮都启动相同的视频。我猜这就是为什么以前有$（'#'+player_id）？然后您需要将按钮（或按钮和视频，为了简单起见）放在一个公共元素中！或者给按钮一个playerId派生的唯一类！您所要做的就是清楚地识别容器或按钮，并创建一个简单而健壮的jQuery来查找它们。使用
console.log（）
&您的调试器来确保它工作正常，这是一个简单的东西。我意识到它可能很简单，但对我来说并不遗憾，因为我的领域是css、php和mysql。如果你有兴趣的话，我可能会把这件事外包出去。当然，如果你还需要一些帮助的话，给我在gmail.com的twhitmore.nz留言&我们可以讨论一下。
<div class="buttonHolder">               
    <img class="simple" id="api_play" src="test.jpg" />
                <img class="simple" id="api_pause" src="test.jpg" />
</div>
            </div>
        </div>

        <div>
           <div>
            <h1>Player 2</h1>
            <div class="api_output"></div>
            <iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>

<div class="buttonHolder">
    <img class="simple" id="api_play" src="test.jpg" />
    <img class="simple" id="api_pause" src="test.jpg" />
</div>
        </div>
    </div>