在父项之前简化先前的元素选择

Question

我想简化此树中.layer元素的选择：

<dt class="item">
    <span class="layer"></span>
    <span class="data"><span class="box"></span></span>
</dt>

我当前的位置$(this)是.box元素，我想从中选择.layer元素。

在我目前的解决方案中，我回到父级并选择子元素.parents('.item').find('.layer')，但我宁愿避开通过父级的路径。我尝试用.prev('.layer')做到这一点，但它似乎不起作用，我不知道这里有什么可用。

Answer 1

jQuery有父级和上级选择器：

$(this).parent().prev();

Answer 2

如果对HTML进行细微更改，最安全的方法是不会破坏：

$(this).closest(".item").find(".layer")

.prev()的问题是要求元素处于准确位置或不起作用。当您尝试$(this).prev()时，.box中没有以前的兄弟，因此无法找到任何内容。

针对它的更脆弱的方式（依赖于所有元素的精确定位）将是：

$(this).parent().prev()

我不建议这样做，因为HTML的轻微格式化更改很容易打破（假设有人决定在错误的位置再添加一个<span>）而我的第一个建议是容忍相当重要的HTML更改而不会破坏。除非您在一个循环中执行数百到数千个这样的操作，否则您不太可能看到明显的性能差异。