コードをもっとシンプルにする方法はありますか？

Question

クリックして他のものを削除するときにaddclassであるjQueryコードを作成しました。

$('.list_qna li a').on('click', function (e) { 
    $(this).parent('li').addClass('selected').siblings('.selected').removeClass('selected'); 
    e.preventDefault(); 
}); 

$('.list_box li a').on('click', function (e) { 
    $(this).parent('li').addClass('selected').siblings('.selected').removeClass('selected'); 
    e.preventDefault(); 
}); 

$('.list_contact li a').on('click', function (e) { 
    $(this).parent('li').addClass('selected').siblings('.selected').removeClass('selected'); 
    e.preventDefault(); 
}); 




<ul class="list_qna"> 
    <li> 
     <a href="#">list</a> 
    </li> 
    <li> 
     <a href="#">list</a> 
    </li> 
</ul> 

<ul class="list_box "> 
    <li> 
     <a href="#">list</a> 
    </li> 
    <li> 
     <a href="#">list</a> 
    </li> 
</ul> 

<ul class="list_contact "> 
    <li> 
     <a href="#">list</a> 
    </li> 
    <li> 
     <a href="#">list</a> 
    </li> 
</ul> 

異なる要素に対してコードをよりシンプルにする方法はありますか？ 助けてください。あなたはすべてのリストに同じ動作をする場合

*それはそれらのすべてに同じクラスを使用するのが最善であるよりも、HTMLの構造

Answer 1

で更新。またJSFiddle上

$('.list_selection li a').on('click', function(e) { 
 
\t e.preventDefault(); 
 
\t $(this).parent('li').addClass('selected').siblings('.selected').removeClass('selected'); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.list_selection { 
 
    list-style: none; 
 
    overflow: hidden; 
 
} 
 
.list_selection li { 
 
    width: 30%; 
 
    float: left; 
 
    margin: 5px; 
 
    border: 1px solid black; 
 
} 
 
.list_selection a { 
 
    display: block; 
 
    background: none red; 
 
    cursor: pointer; 
 
    text-align: center; 
 
} 
 
.list_selection .selected a { 
 
    background: none yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list_qna list_selection"> 
 
    <li>List qna 1<a>select</a></li> 
 
    <li>List qna 2<a>select</a></li> 
 
    <li>List qna 3<a>select</a></li> 
 
</ul> 
 
<ul class="list_box list_selection"> 
 
    <li>List box 1<a>select</a></li> 
 
    <li>List box 2<a>select</a></li> 
 
    <li>List box 3<a>select</a></li> 
 
</ul> 
 
<ul class="list_contact list_selection"> 
 
    <li>List contact 1<a>select</a></li> 
 
    <li>List contact 2<a>select</a></li> 
 
    <li>List contact 3<a>select</a></li> 
 
</ul>

：ここでは一例です。このように：

$('.list_qna li a, .list_box li a, .list_contact li a').on('click', function(e) { 
    e.preventDefault(); 
    $(this).parent('li').addClass('selected').siblings('.selected').removeClass('selected'); 
}); 

は、指定されたすべてのセレクタの組み合わせ結果を選択：私はあなたができないか、jQuery Multiple Selectorを使用することができますよりも、（カンマで区切られたセレクタを読んで）、クラスを追加したくないケース

。