javascript - 复杂的jquery选择器: challenge

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“单元格”
• 返回父 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 Link