Упростить предыдущий выбор элементов перед тем родителем

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 без нарушения. Если вы не делаете сотни или тысячи из них в цикле, маловероятно, что вы увидите заметную разницу в производительности.