如何获取由 before 方法追加的元素

Question

源示例是这样的

// block with caption
var caption_block = "<div class='caption-block'><h1>"+ options.title + "</h1><div class='pages'><a href='/' id='left_pg'></a><div id='counter'>"+ (i+1)+'/'+(elms+1)+"</div><a href='/' id='right_pg'></a></div></div>";
// put the elemnt with caption into the DOM
$('ul.slider').before(caption_block);
// by click in #counter TEST
$('a').bind('click',function(){
 $('#slider').find('#counter').text(" TEST ");
});

倒霉，但它什么都不做。

脚本找不到div#counter。如何获得它？

HTML 看起来像

<div id="slider"><ul class="slider" /></div>

Answer 1

您使用它的方式，before将ul.slider作为同级添加到包含div#counter的标题块中。您可以通过检查其共同父级来选择滑块：

$('a').click(function(){
  $('#slider').parent().find('#counter').text(" TEST ");
});

Answer 2

写$('#counter').text(" TEST ")

我也认为你需要像下面这样绑定你的链接标签，

$('a', $('ul.slider')).click (function () {
    $('#counter').text(" TEST ")
});

Answer 3

首先，您按类名.slider引用滑块，然后通过 id #slider 引用它。

其次，你没有 id 'a' #a 的锚点，你可能想使用 $('a') 来引用锚元素。

第三，您的选择器正在滑块内部寻找#counter，它不是滑块的子项。 它是在滑块之前插入的，而不是在孩子的时候插入的。

请参阅此小提琴以获取一些工作代码 http://jsfiddle.net/DyexP/2/

<ul id="slider" class="slider">ul</ul>​
var i = 1;
var elms = 10;
var options = {};
options.title = "title";
// block with caption
var caption_block = "<div class='caption-block'><h1>"+ options.title + "</h1><div class='pages'><a href='/' id='left_pg'></a><div id='counter'>"+ (i+1)+'/'+(elms+1)+"</div><a href='#' id='right_pg'>click me</a></div></div>";
// put the elemnt with caption into the DOM
$('ul.slider').before(caption_block);
// by click in #counter TEST
$('a').click(function(){
     $('#slider').parent().find('#counter').text(" TEST ");
});​

Answer 4

试试这个，

与以前的

$('a').click(function(){
    $('#slider').prev('div').find('#counter').text(" TEST ");
});

或使用滑块的父级

$('a').click(function(){
     $('#slider').parent.find('#counter').text(" TEST ");
});

直接使用 id

$('a').click(function(){
    $('#counter').text(" TEST ");
});