复杂的jquery选择器：挑战

Question

我已经在 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)
});

所以基本上，我会需要类似的东西

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

：

• 从链接“link_to_tooltip_1”开始，
• 返回父div“cell”，
• 返回父td，
• 然后转到子div“none”
• ，最后选择子div“tooltip_1”，

非常感谢。

Answer 1

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

Answer 2

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

可能是您正在寻找的？

Answer 3

为什么不这样放置你的工具提示呢？ :

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

编辑
我不知道你不能使用 $(this)。所以在这种情况下，你可以这样做：

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

Answer 4

这是您正在寻找的选择器：

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

说明：

您不能向后（匹配一个元素，然后匹配其父元素）。但是，您可以选择一个元素并验证它是否包含与其他选择器匹配的元素：

"td:has(.cell .link_to_tooltip_1)"

这会选择.link_to_tooltip_1 的父级 。因此，这正是您所描述的 .link_to_tooltip_1.parentNode.parentNode 。

然后，您只需在选定的 中选择 .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 选择器:-)

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 结构。虽然不能保证它会起作用，因为我不知道该插件，也不知道将函数作为参数传递是否不会与它的实现方式发生冲突 - 您可能必须更改插件以允许它接受函数内容参数。

再见，祝你好运，

汤姆