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"none"に移動します
  • 最後に、子div"tooltip_1"を選択します

どうもありがとう。

4

5 に答える 5

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 に答える
2 
$('a.link_to_tooltip1').closest('tr').find('.tooltip_1');

おそらくあなたが探しているものですか？

于 2011-01-26T11:10:20.697 に答える
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したものを選択するだけです<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 に答える