JQuery使用parents查找Div

Question

我有一整桌的复选框。每行都是一个事件，每个复选框都是需要为该事件完成的任务。我希望能够用选中它的用户的首字母替换该复选框。我也希望能够选择下面的复选框下的div被点击，这样我就可以显示它，因为它包含我的首字母。我也在使用Ruby on Rails。

<td class='completed_box'  id='complete_raw_footage_<%= check_list.id %>'>
        <%= f.check_box :raw_footage_check, :class => 'task_check', :id => 'check_list_raw_footage_check_' + check_list.id.to_s, :category => 'raw_footage', :check_list_id => check_list.id, :style => ("display:none" if check_list.raw_footage_user_id != nil) %>    
        <div class='initials' style="<%= 'display:none;' if check_list.raw_footage_user_id == nil %>">
            <div id='raw_footage_<%= check_list.id %>' title='<%= check_list.event.name %>' class='hidden_dialog'>
                    <b>Task Completed:</b> Raw Footage Recieved <br />
                    <b>Task Completed By:</b> <%= check_list.raw_footage_user_id.name rescue current_user.name %><br />
                    <b>Task Completed At:</b> <%= check_list.raw_footage_date.strftime("%F %r") rescue Time.now.strftime("%F %r") %>
            </div>
            <%= check_list.raw_footage_user_id.initials rescue current_user.initials%> <br />
            <%= check_list.raw_footage_date.strftime("%-m/%d") rescue Time.now.strftime("%-m/%d") %>
        </div>
    </td>

因此，当点击带有类'task_check‘的复选框时，它将只找到下一个类'initials’，并将css更改为display:inline。如果您需要更多信息，请让我知道。

$('.completed_box').children('.initials').css('display','inline')

这是我最初使用的，但它将每个带有类首字母的div都转换为display:inline。

Answer 1

您需要使用this作为起点，您可以使用.closest()查找特定的父级，并使用.find()在同一父级下查找另一个下级。使用.closest()和.find()不太容易改变，因为它们不依赖于确切的位置或父代的确切数量-它们只依赖于层次结构的同一分支。

我不确定我是否完全遵循了您的模板HTML，但可能是这样的：

$(this).closest(".completed_box").find(".initials").css('display','inline')

Answer 2

您可以使用.next()查找下一个元素

$('.task_check').click(function(){
    var $this = $(this);
    if( $this.is(':checked') ) {
        $(this).next('.initials').css('display','inline')
    } else {
        $(this).next('.initials').hide();
    }
})

Answer 3

你也可以用CSS做到这一点。

.task_check:checked + .initials{display:inline-block;}

根据W3School的说法，它应该得到所有主流浏览器的支持。