javascript - Js - 一种比 if-else 更优雅/更高效的在 DOM 中查找第 n 个元素的方法

Question

我需要将一个元素在 dom 中向上 move 一层 ...

所以我做了:

  jQuery(document).ready(function() {

  jQuery('.pricing-table .fancy-header').each(function() {
    jQuery(this).parent().before(this);
        })  

 });

而且这没关系..

var $node = jQUery('.pricing-table .fancy-header');
           jQuery($node).parent().before($node);
     })

效果很好(http://jsfiddle.net/obmerk99/EdvTz/)，我的问题是，在某些特定页面加载时，我可能有 2 个不同的 .fancy-header 元素，我需要将第一个元素向上 move 第二个向下..

参见 fiddle :http://jsfiddle.net/obmerk99/EdvTz/3/

现在，除了一些可能导致失败的语法错误(但我可能可以解决)之外，我的问题更多是关于找到一种更优雅的 和/或 有效方法，而不是原始的if-else语句。

jQuery 有这种方法吗？

Answer 1

“优雅”是主观的，但无论如何这是一个简短的方法。

jQuery('.pricing-table .fancy-header').each(function (i) {
    jQuery(this).parent()[i ? "after" : "before"](this);
});

由于您只有一两个匹配项，我们只使用计数器来选择 “after”(如果 1)或 “before” "(如果 0)方法。

---

但为了清楚起见，if 语句可能更好。您仍然可以使用 i 计数器。

jQuery('.pricing-table .fancy-header').each(function (i) {
    if (i)
        jQuery(this).parent().after(this);
    else
        jQuery(this).parent().before(this);
});

---

如果这真的很重要(猜测不是)，那么这里是高效的:

jQuery('.pricing-table .fancy-header').each(function (i) {
    var par = this.parentNode;
    par.insertBefore(this, i ? par.nextSibling : par);
});