如何在 Jquery/Javascript 中选择预定义选择的第一个和最后一个元素而不循环

how to select the first and last element of a predefined selection in Jquery/Javascript without looping?

本文关键字：选择 第一个 最后一个 元素 循环 预定义 Jquery Javascript      更新时间：2023-09-26

我有一个Jquery Mobile可折叠集，它可以有任意数量的"抽屉"。JQM 分配角如下所示：

  collapsibleHeading.find("a").first()
      ...
      .add( ".ui-btn-inner", $el )
         .addClass( "ui-corner-top ui-corner-bottom" )

我想在可折叠对象中添加一个水平选项，因此它也像选项卡框一样工作。我已经准备好了 CSS，但单个语句中的角落很困难......

我需要检查方向，我这样做是这样的： 

 (o.directon) == true/false

这是我所拥有的：

// predefine classes for HORIZONTAL(first,last,rest) and VERTICAL
baseCorners = o.direction == "horizontal" ? [ "ui-corner-tl", "ui-corner-tr", "" ] : ["ui-corner-top", "ui-corner-top", "ui-corner-top"],
toggleCorners = o.direction == "horizontal" ? [ "ui-corner-bl", "ui-corner-br", "" ] : ["ui-corner-bottom","ui-corner-bottom","ui-corner-bottom" ],

所以现在我可以分配 baseCorners 和 toggleCorners，而不必担心方向。

我的问题：如何为第一个/最后一个/剩余的可折叠对象添加检查/过滤器，以便我可以在一个语句中运行它，如下所示：

  collapsibleHeading.find("a").first()
      ...
      .add( ".ui-btn-inner", $el )
         .addClass( "if-first" ? baseCorners[0] : "elseif-last" ? baseCorners[1] "else" baseCorners[2] + "same for toggleCorners" )

问题：
我迷路了...知道这是否可能吗？感谢您的帮助。

编辑：
这就是我现在拥有的：

.filter(":first")
    .add( ".ui-btn-inner", $el )
        .addClass( baseCorners[0] + toggleCorners[0] ).end()
.filter(":last")
    .add( ".ui-btn-inner", $el )
        .addClass( baseCorners[1] + toggleCorners[1] ).end()
.not(':first').not(':last')
        .add( ".ui-btn-inner", $el )
            .addClass( baseCorners[2] + toggleCorners[2] );

不确定这是最可行的解决方案

溶液：
感谢您帮助大家。这就是我最后的做法。一旦我设置了建议的解决方案，我发现 JQM 为每个元素运行脚本，所以我不能使用循环，因为在每次运行时，只有 1 个元素要循环。

这样它的工作原理：

 // if not horizontal, I always assign the same class
 baseCorners = o.direction == "horizontal" ? [ "A", "B", "C" ] : ["D", "D", "D"],
 toggleCorners = o.direction == "horizontal" ? [ "E", "F", "G" ] : ["H","H","H" ],
 // get position of current element and calculate trigger
 collIndex = $('div:jqmData(role="collapsible-set") div:jqmData(role="collapsible") h3').index(collapsibleHeading),
 collTrigg = collIndex == 0 ? 0 : collIndex == $('div:jqmData(role="collapsible-set") div:jqmData(role="collapsible")').length-1 ? 1 : 2;
通过此设置，第一个元素始终获得索引

0，最后一个元素始终获得索引 1，以及索引 2 之间的所有元素，因此我对两者之间的元素数量保持灵活。

那么它只是：

 $el.add( ".ui-btn-inner", $el )
      .addClass( baseCorners[collTrigg] + toggleCorners[collTrigg] );

好！

这应该是相同的。这并不是说它的代码少得多，但它避免了重复，因此应该更容易维护。

selection.each(function(i,e) {
    var el = $(e),
        index = i===0 ? 0 :
            i===selection.length-1 ? 1 : 
            2;
    el.add( ".ui-btn-inner", $el )
        .addClass( baseCorners[index] + toggleCorners[index] );
});

我正准备使用"i"变量发布对 frecular 答案的更改，但他们只是更新了他们的答案来做到这一点。所以我想我只是根据 frequent 的原始答案发布一个答案：

http://jsfiddle.net/8gYcL/1/

它

绝对不如检查"i"变量有效，但我想向您展示如何使用它:)

相关文章：