javascript - 如何在 click 方法中使用 jquery 访问下一个父元素？

Question

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

 $(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>

当我按我选择的选项的值点击目标元素依赖时，我不会做一些改变!

如何访问父元素的下一个父元素？

限制:

我不确定它是否在这个区 block 中!因为我的 Html 结构多次包含这个!

Answer 1

1. 在$(".lv1 li").click(function (event) {之后添加var a = this;

2. 将 $("blabla").removeClass('betimes'); 替换为 $(a).closest('.options').next('.betimes ').removeClass('betimes');