如何使用jquery内部的click方法访问下一个父元素？

Question

How to access the next parent element using jquery inside click method?

  $(document).ready(function () { $(".lv1 li").click(function (event) { this.parentElement.parentElement.textContent = this.textContent; $.ajax({ type: 'post', url: '@Url.Action("myAction", "Mycontroler")',// MVC method: generate url for backend; dataType: 'json', data: { InitiateId: $(this).val(), InitiateType: "Discipline" }, success: function (data) { $("blabla").removeClass('betimes'); // action with data aplied on element sub2 } }); }); }); 

 // i'm happy here .root-head ul{list-style:none;padding:1px 1px;overflow:hidden;}.root-head ul li{display:none;}.root-head ul li.level{display:flex;float:left;color:#777;padding-left:3px;}.root-head ul li.level:before{content:" > ";}.root-head ul li.level:hover{color:#999;}.root-head ul li.level.options.betimes{display:none;}.root-head ul li.level.options .option-selector{display:none;position:absolute;top:30px;padding:10px;border:2px solid #777;border-radius:10px;width:150px;}.root-head ul li.level.options .option-selector li{display:block;text-align:center;color:#777;}.root-head ul li.level.options:hover .option-selector{display:block;}.root-head ul li.level.options:hover .option-selector li{display:block;}.root-head ul li.level.options:hover .option-selector li:hover{border-bottom:2px solid #777;color:#999;transition:linear .5s ease-in 0s;}.root-head ul li.level:first-child{padding-left:20px;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <div class="root-head"> <ul> <li class="level">main</li> <li class="level options"> sub1 <ul class="option-selector lv1"> <li value="1">option1</li> <li value="2">option2</li> <li value="3">option2</li> <li value="4">option3</li> <li value="5">option4</li> <li value="6">option5</li> </ul> </li> <li class="level options betimes"> sub2 </li> <li class="level options betimes"> sub3 </li> </ul> </div> 

I wont to make some changes when I press click on target element dependency by the value of the option what I chose!

How to access the next parent of the parent element?

Restriction:

I wont to be sure of it is in this block! Because of my Html structure contains this by multiple time!

Answer 1

1. After $(".lv1 li").click(function (event) { add var a = this;

2. Replace $("blabla").removeClass('betimes'); to $(a).closest('.options').next('.betimes').removeClass('betimes');

Answer 2

Use event.target.parentElement.nodeName

List is parentElement attributes: https://www.w3schools.com/jsref/dom_obj_all.asp

 $(document).ready(function () { $(".lv1 li").click(function (event) { //event.target.parentElement.nodeName = this.textContent; alert(event.target.parentElement.nodeName); }); }); 

 // i'm happy here .root-head ul{list-style:none;padding:1px 1px;overflow:hidden;}.root-head ul li{display:none;}.root-head ul li.level{display:flex;float:left;color:#777;padding-left:3px;}.root-head ul li.level:before{content:" > ";}.root-head ul li.level:hover{color:#999;}.root-head ul li.level.options.betimes{display:none;}.root-head ul li.level.options .option-selector{display:none;position:absolute;top:30px;padding:10px;border:2px solid #777;border-radius:10px;width:150px;}.root-head ul li.level.options .option-selector li{display:block;text-align:center;color:#777;}.root-head ul li.level.options:hover .option-selector{display:block;}.root-head ul li.level.options:hover .option-selector li{display:block;}.root-head ul li.level.options:hover .option-selector li:hover{border-bottom:2px solid #777;color:#999;transition:linear .5s ease-in 0s;}.root-head ul li.level:first-child{padding-left:20px;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <div class="root-head"> <ul> <li class="level">main</li> <li class="level options"> sub1 <ul class="option-selector lv1"> <li value="1">option1</li> <li value="2">option2</li> <li value="3">option2</li> <li value="4">option3</li> <li value="5">option4</li> <li value="6">option5</li> </ul> </li> <li class="level options betimes"> sub2 </li> <li class="level options betimes"> sub3 </li> </ul> </div>