javascript - complex jquery selector : challenge -
i've searched among jquery selectors time now, can't find solution problem.
i've got html table filed foreach. on each line, several links pop tooltips. problem : can't find right selector.
<table> <?php foreach($article) :?> <tr> <td> <div class="none" style="display:none;"> <div class="tooltip_1"> "the content of tooltip_1" </div> <div class="tooltip_2"> "the content of 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>
to show tooltip, use qtip, , works :
$('a[class="link_to_tooltip_1"]').qtip({ content: $('jquery selector'), (... other options) });
so basicaly, need like
content: $('self.parentnode.parentnode > div[class="none"] > div[class="tooltip_1"]'),
in other words :
- start link "link_to_tooltip_1"
- go parent div "cell"
- go parent td
- then go child div "none"
- and select child div "tooltip_1"
thanks lot.
// "complex" version; // assumes .cell , .none nested inside same container, whether <td> or <li> or $(".link_to_tooltip_1").each(function () { console.log($(this).closest(".cell").siblings(".none").find(".tooltip_1")); // $(this).qtip({ content: /* use above selector */ }); }); // "not-so-complex" version; // assumes both items 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 */ }); });
Comments
Post a Comment