Упрощая код без родителей и детей селекторов

Question

$(document).ready(function(){ 
    $(".EditBusinessName").hide(); 

    $(".editBtn a").click(function() {  
     $(this).parent().parent('.myBusinessEdit').children('.EditBusinessName').show(); 
     $(this).hide(); 
    }); 

    $(".EditBusinessName a").click(function() { 
     $(this).parent().parent(".EditBusinessName").hide(); 
     $(this).parent().parent().parent().children(".editBtn").children("a").show(); 
    }); 
}); 

Как можно упростить выше код без использования parent() и children() селекторов? div класс myBusinessEdit будет общим классом для каждой секции.

http://plnkr.co/edit/xgP49K51urBvZQlyLGxQ?p=preview

Answer 1

Сама логика вполне звук, так что не так много упрощения, что можно было бы сделать. Вы можете использовать closest() и find(), чтобы сделать код менее жестко выровненным по отношению к числу элементов parent/child в структуре HTML. Попробуйте это:

$(".editBtn a").click(function() { 
 
    $(this).hide().closest('.myBusinessEdit').find('.EditBusinessName').show(); 
 
}); 
 

 
$(".EditBusinessName a").click(function() { 
 
    $(this).closest(".EditBusinessName").hide(); 
 
    $(this).closest('.myBusinessEdit').find(".editBtn a").show(); 
 
});

a { 
 
    border: solid 1px red; 
 
} 
 
.EditBusinessName { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="myBusinessEdit"> 
 
    <div class="editBtn"><a id="">Edit</a></div> 
 
    <div class="EditBusinessName"> 
 
     <div class=""> 
 
      XBusinessName 
 
      <a id="">Cancel</a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="myBusinessEdit"> 
 
    <div class="editBtn"><a id="">Edit</a></div> 
 
    <div class="EditBusinessName"> 
 
     <div class=""> 
 
      XBusinessName 
 
      <a id="">Cancel</a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="myBusinessEdit"> 
 
    <div class="editBtn"><a id="">Edit</a></div> 
 
    <div class="EditBusinessName"> 
 
     <div class=""> 
 
      XBusinessName 
 
      <a id="">Cancel</a> 
 
     </div> 
 
    </div> 
 
</div>