如何获取before方法附加的元素?

时间:2012-09-27 16:05:00

标签: javascript jquery

源代码示例就是这种

// 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>

4 个答案:

答案 0 :(得分:1)

试试这个,

以前的

$('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 ");
});

答案 1 :(得分:1)

您使用它的方式,before正在将ul.slider添加为包含div#counter的字幕块的兄弟。您可以通过检查它们的共同父项来选择滑块:

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

答案 2 :(得分:1)

只需撰写$('#counter').text(" TEST ")

即可

我认为你需要绑定链接标签,如下所示,

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

答案 3 :(得分:1)

首先,您要按类名.slider引用滑块,稍后您可以通过ID #slider引用它。

其次,你没有'id'为'#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 ");
});​