Question

我只需要使用jQuery selector来选择前一个元素。

<li class="collapsable">
    <div class="hitarea collapsable-hitarea"></div>
    <span id="devicelist" class="ankr">Device List</span>
    <ul id="ultree">
        <li type="dev" device="/dev/sdh1" id="dev0" class="litab">
            <img height="20px" width="20px" src="../Images/drive.png" class="dicon">
            <a class="ankr dn" href="#">'/dev/sdh1'</a>
        </li>
    </ul>
</li>

$(document).on("click","#devicelist,**Here Selector will be used**",this,function(event){
    console.log(this);
    console.log(event.target);
});

我想选择具有类.hitarea的div。我正在寻找像$("#devicelist:div.hitarea")

这样的东西

只能使用selector jQuery。

Answer 1

您可以使用prev()选择器

描述：获取每个元素的前一个兄弟匹配元素的集合，可选择由选择器过滤。

$('#devicelist').prev();

Answer 2

$（'。hitarea'）也是一个选择器。

您可以将其用作选择器：

$('#devicelist,.hitarea')

Answer 3

首先，on()方法（与所有事件委托一样）应绑定到最接近预期目标的非动态添加元素，如API中所述：

在大多数情况下，点击等事件很少发生，性能不是一个重要问题。然而，诸如鼠标移动或滚动之类的高频事件每秒可以发射数十次，并且在这些情况下，明智地使用事件变得更加重要。通过减少处理程序本身完成的工作量，缓存处理程序所需的信息而不是重新计算它，或者通过使用setTimeout限制实际页面更新的数量，可以提高性能。

在文档树顶部附近附加许多委托事件处理程序会降低性能。每次事件发生时，jQuery必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为获得最佳性能，请将文档位置的委派事件尽可能靠近目标元素。避免过度使用文档或document.body来处理大型文档上的委托事件。

考虑到这一点（假设jQuery最初运行时页面中存在ul或ol）我建议直接绑定到该元素：

$('ul').on(/* other stuff */);

而不是document本身。

正如我在评论中指出的那样，CSS缺少一个先前的兄弟选择器和jQuery（据我所知）并没有补偿这种缺陷。这留下了明显的解决方案：

$('ul').on('click', function(e){
    if (e.target.id == 'devicelist' || $('#devicelist').prev()) {
        // do stuff here
    }
});

更简洁地写成：

$('ul').on('click', function(){
    var elem = $('#devicelist');
    if (elem || elem.prev()) {
        // do stuff here
    }
});

当然，你可以知道索引（假设你专注于第二个子元素），只需使用：

$('ul').on('click', function(e){
    if ($(e.target).index() < 2) {
        // do stuff here for the first two elements
    }
});

仅使用jQuery选择器选择上一个元素

3 个答案: