0

我正在构建 twitter 类型的应用程序（网站），我需要一些关于 jQuery 选择器的帮助。

这是 HTML 结构：

<div class="delete_box">
</div>

<div class="report_box">
</div>

<div class="twit">
  <a class="report_link">report</a>
  <a class="delete_link">delete</a>
</div>

前两个 div 是用于删除和报告 twit 的弹出窗口。第三个 div 是实际 twit 所在的位置。两个弹出窗口的样式都设置为不显示。只要它们在 th db 中是 twtis，这个结构就会被循环。

这是选择需要显示的弹出框的 jQuery 代码。

$(document).on('click', '.delete_link', function()  {
    var op_twit = $(this).parents('.twit').prevAll('.delete_box');
    popup(op_twit);
});

$(document).on('click', '.report_link', function()  {
    var op_twit = $(this).parents('.twit').prevAll('.report_box');
    popup(op_twit);
});

现在这个问题它选择所有弹出框并显示它们，如果我只做 prev() 而不是 prevAll() 那么只有报告链接有效（因为 report_box 就在 twit 之前）并且它工作得很好，因为只有一个弹出是显示。但是当我为它放置 prev() 时，删除链接不起作用。

所以问题是我怎样才能选择不完全是以前的前一个元素，但是一个向上的元素。我尝试了兄弟姐妹（），这与 prevAll 选择所有具有 delete_box 类的元素的问题相同。

4

4 回答 4

2

您可以使用prevAll和的组合last：

var op_twit = $(this).closest('.twit').prevAll('.delete_box').first();

我也更改parents为closest，因为我认为您不想获得所有父母，而只想获得第一个父母。

于 2013-09-11T18:28:53.023 回答
1

正如其他人所提到的，您应该稍微修改一下您的 HTML 结构。最简单的方法是在每个 twit 周围添加一个持有者 div。

<div class="twit_hold">
    <div class="delete_box">Del Box</div>

    <div class="report_box">Rep Box</div>

    <div class="twit">
        <a href="#" class="report_link">report</a>
        <a href="#" class="delete_link">delete</a>
    </div>
</div>

然后您只需参考锚的父级.twit_hold并从那里找到您要显示的框。它在 DOM 上下更多，但这样结构的顺序并不重要（你可以有twit, report_box, delete_boxorreport_box, delete_box, twit 或任何其他安排。

$(document).on('click', '.delete_link', function()  {
    var t = $(this).parents('.twit_hold').find('.delete_box');
    // do stuff with the delete_box
}

http://jsfiddle.net/daCrosby/srEDr/1/

于 2013-09-11T18:55:16.800 回答
1

更好的 HTML 结构是：

<div class="twit">
    <a class="report_link">Report</a>
    <a class="delete_link">Delete</a>

    <div class="delete_box">...</div>
    <div class="report_box">...</div>
</div>

使用此结构，您可以将树爬到.twit，然后根据需要查找.delete_box或.report_box。

于 2013-09-11T18:41:23.467 回答
0

你可以试试

var op_twit = $(this).parents('.twit').prev().prev();

但我建议你重新审视你的 HTML 结构。

编辑

由于您没有在 HTML 代码中包含有关多条推文的 HTML 结构，因此我将假设它们是同级的。所以，根据我的假设，你的代码看起来像这样。如果我的假设是错误的，请纠正我。

<div class="delete_box"></div>
<div class="report_box"></div>
<div class="twit">
    <a class="report_link">report</a>
    <a class="delete_link">delete</a>
</div>

<div class="delete_box"></div>
<div class="report_box"></div>
<div class="twit">
    <a class="report_link">report</a>
    <a class="delete_link">delete</a>
</div>

你应该有类似的东西。这将允许您将所有 JS/CSS/jQuery 范围限定为“tweet”，从而使其更容易和更快。

<div class="tweet">
    <div class="delete_box"></div>
    <div class="report_box"></div>

    <a class="report_link">report</a>
    <a class="delete_link">delete</a>
</div>
<div class="tweet">
    <div class="delete_box"></div>
    <div class="report_box"></div>

    <a class="report_link">report</a>
    <a class="delete_link">delete</a>
</div>

此外，我不确定您是否真的需要为每条推文设置单独的删除/报告 div。同样，由于我不知道最初的要求是什么，我假设它是一个确认覆盖，在我看来可以重用。

于 2013-09-11T18:35:47.433 回答