Question

我已经在jquery selectors中搜索了一段时间，但找不到解决问题的方法。

我有一个由 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)
});

所以基本上，我需要像

这样的东西

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

换句话说，

：

从链接“link_to_tooltip_1”开始
回到父div“cell”
回到父母td
然后去儿童div“无”
最后选择子div“tooltip_1”

非常感谢。

Answer 1

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

你可能正在寻找什么？

Answer 2

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

Answer 3

以下是您要查找的选择器：

"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)"

这会选择<td>的父.link_to_tooltip_1。所以这完全符合您所描述的.link_to_tooltip_1.parentNode.parentNode。

然后，您只需在所选的.none .tooltip_1中选择<td>：

"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选择器： - ）

Answer 4

为什么不放置这样的工具提示？：

<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) });

Answer 5

我会尝试这样的事情：

使用工具提示和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结构的通用数据引用的支持的想法。虽然不能保证它会工作，因为我不知道插件，并且不知道传递函数作为参数是否会与它的实现方式发生冲突 - 你可能必须更改插件以允许它接受函数内容参数。

再见，祝你好运，

汤姆

复杂的jquery选择器：挑战

5 个答案: