麻煩選擇使用jQuery

Question

我有一些麻煩jQuery選擇一些程序生成的div

我使用google visualization table顯示，每頁20個結果一些查詢結果的工作程序生成的按鈕。當查詢返回超過20個結果（並且只有當結果超過20個時），分頁按鈕出現在搜索結果窗格的底部。

<div class="google-visualization-table-div-page"> 
    <div class="a-b-c a-d-e a-d-e-j a-d-e-o-p" title="" aria-disabled="true" 
    role="button" style="-moz-user-select: none;"> 
    <div class="a-b-c a-d-e-f-g"> 
     <div class="a-b-c a-d-e-h-g">&lt;&lt;</div> 
    </div> 
    </div> 
<div class="a-b-c a-d-e a-d-e-o-q" title="" role="button" 
style="-moz-user-select: none;" tabindex="0"> 
    <div class="a-b-c a-d-e-f-g"> 
    <div class="a-b-c a-d-e-h-g">&gt;&gt;</div> 
    </div> 
</div> 
</div> 
</div> 

我的目標是將這些相同的分頁按鈕添加到窗格的頂部。不幸的是，複製和粘貼結果窗格上方的那些div無法工作，所以我的計劃是使用jquery的click事件來使頂部的複製/粘貼按鈕以編程方式點擊底部的按鈕。

我的按鈕與上面的div中的按鈕完全相同，只是添加了id。

<div id="top_prev" class="a-b-c a-d-e a-d-e-j a-d-e-o-p" style="-moz-user-select: none;" role="button" aria-disabled="true" title=""> 

<div id="top_next" class="a-b-c a-d-e a-d-e-o-q" tabindex="0" style="-moz-user-select: none;" role="button" title=""> 

不幸的是，我試過的jquery沒有工作，而我在調試時，我想我偶然發現了這個問題。這裏是我的調試JQuery的：

$(document).ready(function() 
{ 
$("#top_prev").click(function(){ 
     if ($(".a-b-c a-d-e a-d-e-j a-d-e-o-p").length) { 
      alert("top_prev success"); 
     }else 
     { 
      alert("top_prev fail"); 
     } 
}); 

$("#top_next").click(function() { 
if ($(".a-b-c a-d-e a-d-e-o-q").length) 
{ 
    alert("top_next success"); 
}else 
{ 
alert("top_next fail"); 
} 
}); 

這將導致「top_next失敗」或「失敗top_prev」盒子正在生成這些div時甚至會出現。這些按鈕的javascript和html甚至在之後生成生成結果窗格，因此底部按鈕應該在頂部按鈕之前生成。

我想我很難理解爲什麼這些選擇器不工作。這裏是我試過的原始的.click jquery：

$(document).ready(function(){ 
$("#top_prev").click(function(){ 
    $(".a-b-c a-d-e a-d-e-j a-d-e-o-p").click(); 
}); 

$("#top_next").click(function() { 
    $(".a-b-c a-d-e a-d-e-o-q").click(); 
}); 
}); 

Answer 1

問題是因爲你的選擇器匹配底部的元素是錯誤的。

你應該使用;

$(document).ready(function(){ 
    $("#top_prev").click(function(){ 
     $(".a-b-c.a-d-e.a-d-e-j.a-d-e-o-p").not(this).click(); 
    }); 

    $("#top_next").click(function() { 
     $(".a-b-c.a-d-e.a-d-e-o-q").not(this).click(); 
    }); 
}); 

在.foo .bar形式的選擇器是匹配與類的bar它們與foo(the descendant selector)類的元素的後代的所有元素。相反，您應該使用.foo.bar，它會搜索類別爲foo和bar的所有元素。

Answer 2

另一種方法是克隆現有的按鈕...

（我假設在這裏，你提供的HTML是公正的分頁按鈕孤單。）

var $paging = $("google-visualization-table-div-page").clone(true); 
$("#containerID").append($paging); 

containerID將是添加到頁面的div或跨度的ID和按鈕將附加到該頁面。

下面是克隆，並附加參考...

• http://api.jquery.com/clone/
• http://api.jquery.com/append/