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

Question

我需要使用仅有的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);
});

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

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

- Rickyrock

---

只应该使用 jQuery 的选择器。有什么原因吗？ - Adil Shaikh

因为我正在使用jQuery 1.9.1和"on"函数。 - Rickyrock

请问您能否发布一下您如何使用.on以及您想选择先前元素的位置？ - Adil Shaikh

你似乎让这个问题变得比必要的复杂，目前并不存在简单（类似CSS的）选择器来选取前一个元素。在这种情况下，.hitarea 的前一个元素是动态生成的还是有其他限制条件？ - David Thomas

@DavidThomas：是的，它将会动态生成。 - Rickyrock

Answer 1

你可以使用prev()选择器。

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

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

- MaVRoSCy

---

谢谢您的代码，我可以做到，但它不是选择器，而是方法。我不能使用它。 - Rickyrock

你的意思是“这是一个方法，我不能使用它”吗？ - MaVRoSCy

不允许在on方法中传递对象。$(document).on("click","SELECTOR",function(){}); - Rickyrock

Answer 2

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

你可以使用它作为一个选择器：

$('#devicelist,.hitarea')

- Janak

---

谢谢，我用这种方式做了。但还有一个问题，我们如何使用jQuery选择器选择前一个元素？ - Rickyrock

我必须指出，这并没有回答原始问题。我有一个扩展场景，希望最终用户能够指定选择器来选择前一个兄弟元素（或任何其他选择器），因此不能使用.prev()。如果我找到答案，我会在这里发布。 - lightmotive

目前看来，JQuery选择器选项仅限于选择下一个同级元素或同级元素。没有记录选择器可以选择上一个同级元素。奇怪。 - lightmotive

Answer 3

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

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

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

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

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

而不是针对文档本身。

正如我在评论中指出的那样，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
    }
});

- David Thomas