如何在click方法内使用jquery访问下一个父元素? [英] How to access the next parent element using jquery inside click method?

问题描述

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

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?

限制:

我无法确定它是否在此区块中！由于我的HTML结构多次包含此内容！

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

推荐答案

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

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

这篇关于如何在click方法内使用jquery访问下一个父元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！