Question

我将此作为我的大型代码的一部分，它似乎很丑陋且不切实际

if (!$(this).closest( "li" ).parent().parent().hasClass('mod-left') ) {
     $(this).closest( "li" ).parent().parent().find('.checkbox').first().find('.wf-check').prop('checked', true);
     $(this).closest( "li" ).parent().parent().parent().parent().find('.checkbox').first().find('.wf-check').prop('checked', true);
     $(this).closest( "li" ).parent().parent().parent().parent().parent().parent().find('.checkbox').first().find('.wf-check').prop('checked', true);
     $(this).closest( "li" ).parent().parent().parent().parent().parent().parent().parent().parent().find('.checkbox').first().find('.wf-check').prop('checked', true);
}

有更好的方法吗？

Answer 1

您可以使用

$(this).parents('selector')

如果你在dom树中有一个类或id，你可以参考。

Answer 2

希望这会对你有所帮助

$(this).parents('.class-of-any-parent').append('this is working');

有关详细信息，请访问jquery parents（）here

的文档

$(this).parents('.class-of-any-parent').find('#checkbox-id').prop('checked',true);

//这将搜索所选父级内的checkbox-id并进行检查

Answer 3

在操作DOM时，不应该依赖HTML的结构和层次结构。在前端工作中，您可以认为HTML是您的结构/布局层，CSS是您的表示/样式层，JS是您的逻辑。每个都应该是分开的。

当您使用$(this).parent().parent();时，移动元素会破坏您的代码。

我想你在这里要做的是检查第一个容器中的类.wf-check的复选框，每个父级中都有.checkbox类。

如果是这种情况，你可以考虑这样做：

$('.checkbox:first-child .wf-check', '.container').prop('checked', true);

您需要做的就是将上面的.container替换为包含所有复选框的最上层父级。

这是一个有效的demo

是否有更好的方法来遍历dom而不是调用parent（）。parent（）？

3 个答案: