jQuery(this) 和 qtip 不工作

发布于 2024-11-26 15:31:03 字数 1709 浏览 1 评论 0原文

使用 jQuery 的 qtip 插件,我试图显示隐藏值(该值已经在悬停在图标上时呈现。问题是它只抓取列表中的第一项并在 qtip 中显示它。现在我知道通常的答案是使用“this”选择器来定位它,但在这种情况下它不起作用...

这是代码:

jQuery('li dl dd.job_icons').qtip({
    content: {
      prerender : true,
      text: jQuery('li dl dd.job_icons').html()
    }
});

我也尝试过使用它,但没有运气:

text: jQuery(this).html()

要获得更清晰的图片,请查看 此链接并将鼠标悬停在图标上(有些有不同的日期,其他的有工资和公司名称图标,应该也会显示)

提前致谢...

编辑:这是渲染的 html

<li class="job job-alt job-featured"> 
 <dl> 
  <dt>Type</dt> 
  <dd class="type"><span class="jtype full-time">Full-Time</span></dd> 

  <dt>Job</dt> 
  <dd class="title"> 
    <strong>
    <a href="http://rockstar.tinygiantstudios.co.uk/jobs/front-end-developer-2/">Front End Developer</a>
    </strong> 
  </dd> 

  <dt>Location</dt> 
  <dd class="location">Anywhere</dd> 

  <dt>Job Admin</dt>    
    <dd class="job_icons"> 
    <div class="job_icons_wrap"> 
     <span class="job_date_detail">7 Feb</span> 
     <a href="#" class="job_date_icon"></a> 

     <a href="http://tinygiantstudios.co.uk" rel="nofollow" class="job_lister_detail">Tiny Giant Studios</a> 
     <a href="#" class="job_lister_icon"></a> 

     <span class="job_salary_detail jtype 100000-and-above">100,000 and above</span>
     <a href="#" class="job_salary_icon"></a> 
 </div>    
 </dd> 
</dl> 
</li>

Using jQuery's qtip plugin, I'm trying to display hidden value (that's already rendered wher hovering over the icons. The problem is that it's only grabbing the first item in the list and displaying that in qtip. Now I know the usual answer would be to use the "this" selector to target it, but in this case it's just not working...

Here's the code:

jQuery('li dl dd.job_icons').qtip({
    content: {
      prerender : true,
      text: jQuery('li dl dd.job_icons').html()
    }
});

And I've tried using this as well with no luck:

text: jQuery(this).html()

To get a clearer picture, check out this link and hover over the icons (some have different dates, and other will have salary and company name icons that should also be displayed)

Thanks in advance...

EDIT: Here's the html that gets rendered

<li class="job job-alt job-featured"> 
 <dl> 
  <dt>Type</dt> 
  <dd class="type"><span class="jtype full-time">Full-Time</span></dd> 

  <dt>Job</dt> 
  <dd class="title"> 
    <strong>
    <a href="http://rockstar.tinygiantstudios.co.uk/jobs/front-end-developer-2/">Front End Developer</a>
    </strong> 
  </dd> 

  <dt>Location</dt> 
  <dd class="location">Anywhere</dd> 

  <dt>Job Admin</dt>    
    <dd class="job_icons"> 
    <div class="job_icons_wrap"> 
     <span class="job_date_detail">7 Feb</span> 
     <a href="#" class="job_date_icon"></a> 

     <a href="http://tinygiantstudios.co.uk" rel="nofollow" class="job_lister_detail">Tiny Giant Studios</a> 
     <a href="#" class="job_lister_icon"></a> 

     <span class="job_salary_detail jtype 100000-and-above">100,000 and above</span>
     <a href="#" class="job_salary_icon"></a> 
 </div>    
 </dd> 
</dl> 
</li>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

暖树树初阳… 2024-12-03 15:31:03

尝试每个()。它具有使用 this 的正确范围。

jQuery('li dl dd.job_icons').each(function() 
    jQuery(this).qtip({
        content: {
          prerender : true,
          text: jQuery(this).html()
        }
    });
});

Try each(). It has the proper scoping to use this.

jQuery('li dl dd.job_icons').each(function() 
    jQuery(this).qtip({
        content: {
          prerender : true,
          text: jQuery(this).html()
        }
    });
});
千仐 2024-12-03 15:31:03

尽管您已经使用 Dennis 的答案解决了这个问题,但这是我使用 each() 得出的结果,这可能会也可能不会帮助您获得您想要的东西:

jQuery('li dl dd.job_icons a[class$=_icon]').each(function() {
    var classToSearch = jQuery(this).attr('class').replace('_icon', '_detail');
    jQuery(this).qtip({
        content: {
            prerender: true,
            text: jQuery(this).closest('dd.job_icons').find('.' + classToSearch).html()
        }
    });
});

Even though you have already solved this using Dennis' answer, here is what I came up with, using each(), which may or may not help you get what you want:

jQuery('li dl dd.job_icons a[class$=_icon]').each(function() {
    var classToSearch = jQuery(this).attr('class').replace('_icon', '_detail');
    jQuery(this).qtip({
        content: {
            prerender: true,
            text: jQuery(this).closest('dd.job_icons').find('.' + classToSearch).html()
        }
    });
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文