如何使用 JQuery 获取 div 中的第一个子 ID答案

【问题标题】：How to get the first child id inside the div using JQuery如何使用 JQuery 获取 div 中的第一个子 ID
【发布时间】：2010-03-08 08:35:53
【问题描述】：

如何使用 JQuery 获取 div 中的第一个子 ID。

示例代码：

<div id='id1'>
    <a id='a1' />   
    <a id='a2' /> 
    <a id='a3' /> 
</div>

我想获取 id a1。

我已经尝试$('#id1 a:first-child').html() 来获取文本。如何获取id？

【问题讨论】：

标签： jquery dom

【解决方案1】：

$("#id1:first-child").attr("id")

【讨论】：

.attr('id') 将获得 id
这将为您提供 id1 元素的 id，而不是它的第一个子元素。为了获得第一个 div 孩子，我使用了#id1 div:first-child。所以 #id1 a-child 会给第一个孩子的 id。
我不知道为什么人们会赞成这个答案 22 upvotes ??为什么。这实际上选择了第一个具有 id - 'id1' 的子元素，查询是选择另一个父 div 下的 'a' 元素
@HeemanshuBhalla 差不多 9 年后你这样评论这个，当时它显然有效。现在，虽然我不记得了，但 API 中的某些内容可能在某些时候发生了变化，但我认为您的评论也是不正确的。也许可以在帖子中测试一下。
@DustinLaine Okay 很抱歉给你的评论惹恼了你，但实际上我想在评论中通知其他用户

【解决方案2】：

使用它来获取 id1 元素的第一个元素：

    $("#id1").children(":first");

【讨论】：

【解决方案3】：

下面的答案将选择 ID 为“id1”的元素下的第一个“a”元素（根据问题中的提问）

$('#id1 a:first-child').attr('id')

下面的代码将只选择 ID 为“id1”的第一个 div，因此它将选择该 div 而不是 div 的子元素（但它不是按照问题的回答）

$('#id1:first-child').attr('id')

【讨论】：

他想要第一个锚的ID（a1）。这将给他第一个锚的第一个孩子。应该是 (a2)。
由于某种原因，您的代码无法与我一起使用。我总是不确定。我写的那段代码给了我第一个id（a1）而不是a2。如果我读到这个：api.jquery.com/first-child-selector 我假设我的代码将在 div "id1" 中的第一个 "" 处搜索...如果我错了，请纠正我.. bruno

【解决方案4】：

如果你想要第一个孩子，你需要

$(element).first();

如果你想从你的元素中获得特定的第一个元素，那么在下面使用

var spanElement = $(elementId).find(".redClass :first");
$(spanElement).addClass("yourClassHere");

试试看：http://jsfiddle.net/vgGbc/2/

【讨论】：

【解决方案5】：

$('#id1:first-child').attr('id')

【讨论】：

查看我对@bruno 评论的回复。同样的事情。

【解决方案6】：

为了让事情变得非常清楚，这是为了找到您已经可以访问的某个元素中的任何元素，在本例中是 id='e1' 的元素：

<style>
  .c1{ border:2px solid red; padding: 12px; background: lightyellow }
  .c2{ border:2px solid green; padding: 12px; background: lightyellow }
  .c3{ border:2px solid blue; padding: 12px; background: lightyellow }
</style>

<div class='c1' id='e1'>
  <div class='c2' id='e2'>
    <div class='c3' id='e3'>text</div>
  </div>
</div>

以下行得到你的 div e2：

var child2 = $('#e1').find(".c2");

以下几行都可以让您获得 div e3：

var child3   = $('#e1').find(".c3");
var child3_1 = $('#e1').find(".c2 :first");

要改变这些，你必须使用这样的对象：

$(child2).css('background-color','white');
$(child3).css('border','4px dotted pink');
$(child3_1).css('color','#ef2323');

我希望这很清楚并且有帮助。

【讨论】：

【解决方案7】：

$("#form .form-group").first();

可能对某人有帮助。

【讨论】：