複雜的jquery選擇器：挑戰

我已經在jquery selectors之間搜索了一段時間，但找不到解決我的問題的任何解決方案。複雜的jquery選擇器：挑戰

我有一個由foreach提交的html表格。在每一行中，有幾個鏈接彈出工具提示。我的問題：找不到合適的選擇器。

<table> 
    <?php foreach($article) :?> 
    <tr> 
     <td> 
      <div class="none" style="display:none;"> 
       <div class="tooltip_1"> 
        "The content of my tooltip_1" 
       </div> 
       <div class="tooltip_2"> 
        "The content of my tooltip_2" 
       </div> 
      </div> 
      <div class="cell"> 
       <a href="#" class="link_to_tooltip_1">a link</a> 
       <a href="#" class="link_to_tooltip_2">a link</a> 
      </div> 
     </td> 
    <tr> 
    <?php endforeach; ?> 
</table>

爲了顯示我的提示，我用qTip，和它的工作原理是這樣的：

$('a[class="link_to_tooltip_1"]').qtip({ 
    content: $('jquery selector'), 
    (... other options) 
});

所以basicaly，我需要像

content: $('self.parentNode.parentNode > div[class="none"] > div[class="tooltip_1"]'),

換句話說

：

從鏈接「link_to_tooltip_ 1"
回去父格‘細胞’
回到父母TD
然後去兒童格‘無’
最後選擇孩子格‘tooltip_1’

謝謝很多。

來源

2011-01-26 Néo Man' s Land

我想知道如果`qtip`可以使用錨作爲工具提示的標題屬性？這應該。 – 2011-01-26 11:38:42

// this is "complex" version; 
// assumes .cell and .none are nested inside same container, whether <td> or <li> or anything 
$(".link_to_tooltip_1").each(function() { 
    console.log($(this).closest(".cell").siblings(".none").find(".tooltip_1")); 
    // $(this).qtip({ content: /* use above selector */ }); 
}); 

// this is the "not-so-complex" version; 
// assumes both items are nested arbitrary level deep inside same <td> 
$(".link_to_tooltip_1").each(function() { 
    console.log($(this).closest("td").find(".tooltip_1")); 
    // $(this).qtip({ content: /* use above selector */ }); 
});

jsFiddle Link

來源

2011-01-26 11:28:41

注意問題的標題是`複雜的jQuery選擇器：挑戰`;-) – arnaud576875 2011-01-26 11:47:37

我已經改變了我的答案有點:) – 2011-01-26 11:58:20

$('a.link_to_tooltip1').closest('tr').find('.tooltip_1');

可能是你在尋找什麼？

來源

2011-01-26 11:10:20 jAndy

注意問題的標題是`複雜的jQuery選擇器：挑戰`;-) – arnaud576875 2011-01-26 11:48:38

謝謝我試過你的解決方案，除非我做錯了什麼，我的問題是，它不會停止時，第一'.tooltip_1 '元素被找到。 - >在一個工具提示中，我有很多提示內容，就像我的表格中的行數一樣（看起來不是很好的英文 - 對不起） – 2011-01-27 09:58:55

這裏是你正在尋找的選擇：

"td:has(.cell .link_to_tooltip_1) .none .tooltip_1"

說明：

你不能走回頭路（匹配的元素，然後它的父）。然而，你可以選擇一個元素，verify that it contains elements that match an other selector：

"td:has(.cell .link_to_tooltip_1)"

這將選擇父.link_to_tooltip_1<td>。所以這就是你描述的.link_to_tooltip_1.parentNode.parentNode。

然後你只需在選擇<td>選擇.none .tooltip_1：

"td:has(.cell .link_to_tooltip_1) .none .tooltip_1"

所以你的示例代碼變爲：

$('a[class="link_to_tooltip_1"]').qtip({ 
    content: $("td:has(.cell .link_to_tooltip_1) .none .tooltip_1"), 
    (... other options) 
});

至於你問了，這是僅一個jQuery做選擇器:-)

來源

2011-01-26 11:23:51 arnaud576875

事實上，它工作得很好，非常感謝，但有一個問題仍然存在：此選擇器選擇所有具有「link_to_tooltip_1」元素的'td'，因此所有'tooltip_1'元素內容都被添加到另一個元素中。。沒有辦法說「td：has（.cell this.link_to_tooltip_1）（...）」？ – 2011-01-27 10:39:06

爲什麼不把你的tooltip這樣？：

<table> 
    <?php foreach($article) :?> 
    <tr> 
     <td> 
      <div class="cell"> 
       <span class="tooltip_1" style="display:none;" >"The content of my tooltip_1"</span><a href="#" class="link_to_tooltip_1">a link</a> 
       <span class="tooltip_2" style="display:none;" >"The content of my tooltip_2"</span><a href="#" class="link_to_tooltip_2">a link</a> 
      </div> 
     </td> 
    <tr> 
    <?php endforeach; ?> 
</table>

和

$('a[class="link_to_tooltip_1"]').qtip({ 
    content: $(this).children("span"), 
    (... other options) 
});

編輯我不知道你不能使用$（本）。所以在這種情況下，你可以這樣做：

$('a[class="link_to_tooltip_1"]').each(function(){ 
    var content = $(this).prev("span"); 
    $(this).qtip({ 
    content: content, 
    (... other options) 
});

來源

2011-01-26 11:35:52 CronosS

我想嘗試這樣的事：

類添加到使用工具提示和rel屬性與目標類元件保持數據的元素

<a href="#" class="iHaveATooltip" rel="tooltip1">link with tooltip yar!</a>

然後在JS

$('a.iHaveATooltip').bind('mouseenter', function(){ 
    $(this).addClass('showingTooltip'); 
}).bind('mouseleave', function(){ 
    $(this).removeClass('showingTooltip'); 
}).qtip({ 
    content: function(){ return $('.' + $('.showingTooltip').attr('rel')).html() }, 
    (... other options) 
});

它是唯一的想法我可以拿出來欺騙缺乏蘇基於DOM結構的通用數據引用。雖然不能保證它會工作，因爲我不知道插件，不知道傳遞函數作爲參數不會與它的實現相沖突 - 您可能必須更改插件以允許它接受函數爲內容參數。

再見，祝你好運，

湯姆

來源

2011-01-26 11:59:07

複雜的jquery選擇器：挑戰

回答

相關問題