комплексный селектор jquery: вызов

Question

Я искал среди jquery селекторов в течение некоторого времени, но не могу найти решение моей проблемы.

У меня есть 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 Link

Answer 2

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

это, наверное, то, что вы ищете?

Answer 3

Я бы попробовал что-то вроде этого:

добавить класс к элементам с всплывающими подсказками и атрибут 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. Хотя я не могу обещать, что он будет работать, так как я не знаю плагин и не знаю, будет ли передача функции в качестве аргумента конфликтовать с тем, как она реализована - вам, возможно, придется изменить плагин, чтобы позволить ему принимать функцию параметр содержимого.

до свидания и удачи,

Tom

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

Вот искатель, который вы ищете:

"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 в выбранном <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: -)