5

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

<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);
});

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

它应该只使用jQuery的选择器来完成。

4

3 回答 3

1

您可以使用prev()选择器

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

$('#devicelist').prev();
于 2013-05-09T06:15:36.667 回答
0

$('.hitarea') 也是一个选择器。

您可以将其用作选择器：

$('#devicelist,.hitarea')
于 2013-05-09T06:53:23.283 回答
0

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

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

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

考虑到这一点（假设jQuery 最初运行时页面中存在ulor 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
    }
});
于 2013-05-09T07:18:16.140 回答