Question

我正在构建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。两个弹出窗口的样式都设置为不显示。只要它们在数据库中是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（）时，删除链接不起作用。

所以问题是如何选择前一个不完全的元素，而不是一个元素。我尝试了siblings（）它与prevAll选择具有delete_box类的所有元素的问题相同。

Answer 1

您可以结合使用prevAll和last：

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

我也将parents更改为closest，因为我不认为你想要所有的父母而只是第一个。

Answer 2

更好的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。

Answer 3

正如其他人所提到的，你应该稍微修改你的HTML结构。最简单的方法是在每个twit周围添加一个holder 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_box或report_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/

Answer 4

你可以尝试

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范围扩展为“推文”，从而使其更容易，更快。

<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。同样，由于我不知道原始要求是什么，我假设它是一个确认覆盖，在我看来可以重复使用。

选择prev（）中的元素一元素

4 个答案: