javascript - 使用parentsUntil或不使用parentUntil在 TreeView 中触发单击事件来搜索节点

Question

我有一个具有以下结构的 TreeView ，我想扩展树节点以按 id 选择特定节点。

我已经达到了可以到达parentUntil的阶段，但我不确定如何使用它触发点击事件或更改 parent 的 sibling 的 child 的类，

• 如何使用或不使用parentUtil函数来触发类“col”的div上的点击事件

这是 fiddle :www.jsfiddle.net/m3hecxyr

这就是我正在尝试的，

$("a[href='#id=4'").parentsUntil($("#list > ul")) // what's next ?

结构

<div id="list">
  <ul>
    <li>
      <div>
        <div class="col" onclick="toggle(this);" />
        <div class="icon" />
        <a href="#id=1">A</a>
      </div>
      <ul>
        <li>
          <div>
            <div class="col" onclick="toggle(this);" />
            <div class="icon" />
            <a href="#id=2">A.1</a>
          </div>
          <ul>
            <li>
              <div>
                <div class="icon" />
                <a href="#id=3">A.1.1</a>
              </div>
            </li>
            <li>
              <div>
                <div class="icon" />
                <a href="#id=4">A.1.2</a>
              </div>
            </li>
          </ul>
        </li>
        <li>
          <div>
            <div class="icon" />
            <a href="#id=5">B</a>
          </div>
      </ul>
      </li>
      <li>
        <div>
          <div class="icon" />
          <a href="#id=6">C</a>
        </div>
      </li>
  </ul>
</div>

Answer 1

How can I trigger click event on divs with class "col" using or without using parentsUtil function

如果您打算点击与当前子树相关的具有 col 类的 div 元素，您需要转到最近的具有此类类的 div 的元素，并从那里找到相应的 div:

$("a[href='#id=4']").closest($("ul:has(div.col)")).find ('div.col').get(0).click();

未描述您的切换功能，因此我建议将其实现为:

function toggle(ele, evt) {
    evt.stopPropagation();
    ele.classList.toggle('col');
    ele.classList.toggle('exp');
}

对于内联调用:

toggle(this, event);

片段:

function toggle(ele, evt) {
  evt = evt || window.event;
  evt.stopPropagation();
  ele.classList.toggle('col');
  ele.classList.toggle('exp');
}
$(function () {

  $("a[href='#id=4']")
      .closest($("ul:has(div.col)"))
          .find ('div.col').get(0).click();

});

.col {
    border: 3px solid green;
}
.exp {
    border: 3px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="list">
    <ul>
        <li>
            <div>
                <div class="col" onclick="toggle(this, event);" />
                <div class="icon" />
                <a href="#id=1">A</a>
            </div>
            <ul>
                <li>
                    <div>
                        <div class="col" onclick="toggle(this, event);" />
                        <div class="icon" />
                        <a href="#id=2">A.1</a>
                    </div>
                    <ul>
                        <li>
                            <div>
                                <div class="icon" />
                                <a href="#id=3">A.1.1</a>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="icon" />
                                <a href="#id=4">A.1.2</a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div>
                        <div class="icon" />
                        <a href="#id=5">B</a>
                    </div>
            </ul>
        </li>
        <li>
            <div>
                <div class="icon" />
                <a href="#id=6">C</a>
            </div>
        </li>
    </ul>
</div>