gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 04:54:29 25 4
gpt4 key购买 nike

我有一个具有以下结构的 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>

最佳答案

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>

关于javascript - 使用parentsUntil或不使用parentUntil在 TreeView 中触发单击事件来搜索节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42651292/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com