Question

我有一堆生成的div，我想抓住一个特定的孩子。

每个人都大致设置如下：

<div id="generated-row-N>
    <div class="seriously-generated-crap">
        <div id="still-seriously-generated-crap-N">
            <input name="child-to-select-N">
        </div>
    </div>
</div>

其中N是计数器

我不熟悉所有不同类型的jQuery选择器，我试过的是“开头”选择器和“子”选择器的组合。

$("div[id^=generated-row-] > input[name^=child-to-select-]").each(function(){
    // stuff I'm going to do to each input child
});

我认为我的错误是它认为孩子是父母的直接孩子，中间没有元素。有没有办法通过其他两个div并抓住一个孩子而不管它有多少层次？

注意：我没有列出其他子项，因为生成的类和ID名称使用起来不可靠。

提前致谢。我没有太多运气在SO上找到类似的主题，如果这是重复的，请告诉我。

Answer 1

>是直接的子选择器，只是省略它并使用单引号''

包装属性的值

$("div[id^='generated-row-']  input[name^='child-to-select-']")

Answer 2

您需要使用descendant selector代替child selector

$("div[id^=generated-row-] input[name^=child-to-select-]").each(function(){
    // stuff I'm going to do to each input child
});

当你使用子选择器时，它只搜索目标父项的直接子项，在你的情况下，输入元素来自第3级意味着它是后代元素而不是子项

也可以更轻松地应用类

<div id="generated-row-N" class="generated-row">
    <div class="seriously-generated-crap">
        <div id="still-seriously-generated-crap-N">
            <input name="child-to-select-N" class="child-to-select">
        </div>
    </div>
</div>

然后

$(".generated-row input.child-to-select").each(function(){
    // stuff I'm going to do to each input child
});

Answer 3

使用descendant selector，

$("div[id^=generated-row-] input[name^=child-to-select-]").each(function(){
    // stuff I'm going to do to each input child
});

或使用.find()

$("div[id^=generated-row-]").find("input[name^=child-to-select-]").each(function(){
    // stuff I'm going to do to each input child
});

请记住这一点，位于父级第一级的元素称为子元素，另一方面位于父级更深层的元素称为后代此外，儿童也属于后代。

Answer 4

您不需要立即使用子选择器。使用：

$("div[id^=generated-row-] input[name^=child-to-select-]").each(function(){
  // stuff I'm going to do to each input child
});

Answer 5

如果为输入元素指定一个公共css类to-process，则代码会简化为

$(".to-process").each(function(){
  // stuff I'm going to do to each input child
});

其他优点：

无需担心感兴趣元素的实际嵌入html结构
简化常见样式

Answer 6

var test= $("div[id^='generated-row-'] input[name^='child-to-select-']")

jquery通过随机生成的div选择子项

6 个答案: