另一个jquery动态选择器

Question

我刚刚在这里问了一个关于选择 id_* 形式的所有 id 的问题，其中 * 是任何字符串，id 是元素的 id。我得到了一个很好的工作解决方案：

$("*[id^=" + id + "_]").each(function() {... // id is the element name

我现在需要更进一步： 我的所有 id 均采用以下形式：a_b_c ...，其中 ab 和 c 是任意字符串（不包含“”）。因此，现在不需要选择 id_* 形式的所有元素，其中 * 可以是 a_b_c ... 我只需要选择 1 层深度：即形式id_a。换句话说，它停在下一个“”处。这可能吗？

举个例子：

如果我的 id 是：first 并且存在 id：first_second、first_second_third 它将仅选择 first_second

Answer 1

听起来您在字段 id 中存储了太多值。在 HTML5 中，我们现在有了 data- 属性。

也许，您应该使用类似这样的 data- 属性来链接它们？

<div id="a">
</div>

<div id="b0" data-parentId='a'>
</div>

<div id="b1" data-parentId='a'>
</div>

<div id="b2" data-parentId='a'>
</div>

<div id="c" data-parentId='b1'>
</div>

它仍然会验证，因为任何以 data- 开头的非标准属性都将被视为有效。

请参阅：http://ejohn.org/blog/html-5-data-attributes /

然后，您的 jQuery 选择器可以使用这个新属性，而不是尝试解析字符串，

这样会选择 a 的所有子元素

var childrenOfA = $("div[data-parentId='a']);

Answer 2

我最终所做的（并且我愿意接受更快的实现）是：

$("*[id^=" + id + "_]").each(function() {
   //here I simply split the id and test the size of the array
   //if its too large (i.e. too deep in the tree), I return true (to continue
   //  to the next iteration):

   var row = $(this);
   var split = row.attr('id').split("_");

   if(split.length > SOME_PREDETERMINED_VAL)
      return true;

   //code here
});

我对此并不完全满意，因为它仍然遍历所有元素（或者无论each()函数中的过滤器如何，它都会这样做吗？？） 。

Answer 3

这并没有为您提供完整的解决方案，但您可以尝试 属性前缀选择器< /a> 或 属性以选择器开头

这将允许您选择元素的任何后代：

$("[id^='a_b_']").each(....

会考虑如何删除孙子等，但这可能会让您开始。

编辑

我刚刚发现有人提出了关于jQuery通配符 - 这看起来好像它可以满足您的需要。

Answer 4

看来您使这项任务过于复杂化了。假设你的结构目前是这样的：

<div id="a">
    <div id="a_b">
        <div id="a_b_c">
        </div>
    </div>
</div>

为什么你不按照这些思路做一些事情...

<div id="a">
    <div class="b">
        <div class="c">
        </div>
    </div>
</div>

所以，如果我只是想要 #a .b 我会做：

$("#a .b").not("#a .c").show();  

让它更语义化并且可读。我明白你想做什么吗？可能需要更多地了解您到底在做什么

Answer 5

显而易见的解决方案是更改您的文档，例如，

<div id="a"></div>
<div id="a_b"></div>
<div id="a_b_c"></div>

您可以编写

<div id="a" class="l1"></div>
<div id="a_b" class="l2"></div>
<div id="a_b_c" class="l3"></div>

然后选择 $('.l2[id^=a_]')。如果这不是一个选项，您可以尝试某种筛选方案：（

var set = $('[id^='+id+'_]'), i = 0;
while (i < set.length) {
    var e = set.eq(i);
    if (e.attr('id').substr(id.length+1).match('_')) {
        set = set.not(e);
    } else {
        i++;
    }
    set = set.not($('[id^='+e.attr('id')+'_]'));
}

我还没有测试过，所以可能会出现错误，并且我不确定 not 是从结果集，但你明白了。）

这取决于文档结构和浏览器，这是否实际上比简单地遍历 while 集并跳过带有两个 _ 的所有内容的天真实现更快ID。 （每个节点的分支数量较多会有所帮助，并且在具有 jQuery 可以调用的 CSS3 前缀选择器本机实现的浏览器上可能会更快。）

更新： 修复了一些错误。逻辑可能会根据您的结构而变化，例如，如果 foo_bar 始终位于 foo_bar_baz 之前，则最里面的 if 分支是不必要的。