【问题标题】:jQuery selector - All elements except first label and input?jQuery选择器 - 除了第一个标签和输入之外的所有元素?
【发布时间】:2023-03-13 23:19:02
【问题描述】:

我觉得我应该可以在这里使用 :not(:first-child) 选择器,但它似乎不像我希望的那样工作。

http://jsfiddle.net/39KZ9/6/

我希望标签仍然出现。我怎样才能简单地做到这一点?

<div id="OrdersSearchResult">
    <input type="radio" id="SearchResultsLink" name="SearchResultNavigation" checked="checked"/>
    <label id="SearchResultsLinkLabel" for="SearchResultsLink">Search Results</label>
</div>​

$(document).ready(function(){
    $('#OrdersSearchResult').children('label:not(:first-child)').remove();
    $('#OrdersSearchResult').children('input:not(:first-child)').remove();
});​

更新: 很明显,我希望第一个孩子选择器会寻找已匹配元素的第一个孩子。也就是说,我希望它选择所有不是找到的第一个输入并且与标签类似的所有输入。不幸的是,无论是否应用了其他过滤器,它都匹配 OrdersSearchResult 的子元素的第一个子元素。

【问题讨论】:

  • 那么你想删除什么?
  • 在所示示例中不应删除任何内容。我希望两个选择器都不会删除任何东西。不幸的是,第一个子选择器会查看整个元素集合,而不是已经匹配的元素集合。
  • 它正在正常工作 - 它删除了label,即not the first child
  • @wroniasty 正确。我想找到一个选择器,它关心标签的第一个孩子和输入的第一个孩子。

标签: jquery


【解决方案1】:

http://jsfiddle.net/39KZ9/16/

$(document).ready(function(){
    $('#OrdersSearchResult').children('label:gt(0)').remove();
    $('#OrdersSearchResult').children('input:gt(0)').remove();
});​

使用大于选择器。

:gt(0) 基本上表示大于第一个的项目,因为0 的索引是第一个。

http://api.jquery.com/gt-selector/

顺便说一句,:first-child 返回父元素的第一个子元素,而不是一组元素中的第一个子元素。

更简单:

$(document).ready(function(){
    $('#OrdersSearchResult').children('label:gt(0),input:gt(0)').remove();
});​

【讨论】:

  • 我认为这是赢家。 :)
  • 我也这么认为。我实际上忘记了:gt():lt()。超级好用。
【解决方案2】:

对标签和输入执行此操作:

var labels = $('#OrdersSearchResult > label').toArray();
labels.shift();
$(labels).remove();

或许:

$($('#OrdersSearchResult > label').toArray().shift()).remove();

【讨论】:

    【解决方案3】:

    所以您已经删除了小提琴中已经存在的非第一个子元素:标签。

    我想您想删除包含输入和标签的非第一个字段组。在这种情况下,请查看http://jsfiddle.net/39KZ9/8/

    【讨论】:

    • 这是我想要的,但我希望不必将我的内容包装在一个 div 中。不过,如果没有更简单的,我会接受一些。 :)
    【解决方案4】:

    选择器 :first-child 让您选择特定节点的第一个子节点。

    在您的代码中,第一个孩子是第一个输入。所有其他节点都不是第一个子节点,因此,它将被您的 jQuery 调用删除。

    为了解决您的问题,您必须将每对输入和标签分组到一个容器 (&lt;p&gt;, &lt;div&gt;, ...) 中,并在这些容器上应用 jQuery 调用。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2010-09-15
      • 1970-01-01
      • 1970-01-01
      • 2011-07-01
      • 2011-01-24
      • 1970-01-01
      • 2016-08-14
      • 2017-11-20
      相关资源
      最近更新 更多