0

我已经在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“单元格”
  • 回到父 td
  • 然后转到子 div“无”
  • 最后选择子div“tooltip_1”

非常感谢。

4

5 回答 5

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

可能是您正在寻找的东西？

于 2011-01-26T11:10:20.697 回答
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 链接

于 2011-01-26T11:28:41.817 回答
1

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

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

说明：

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

"td:has(.cell .link_to_tooltip_1)"

这将选择 的父<td>级.link_to_tooltip_1。所以这正是.link_to_tooltip_1.parentNode.parentNode你所描述的。

然后你只需要.none .tooltip_1在 selected 中选择<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 选择器:-)

于 2011-01-26T11:23:51.147 回答
1

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

<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)
});
于 2011-01-26T11:35:52.657 回答
1

我会尝试这样的事情：

使用工具提示和 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-26T11:59:07.543 回答