Как получить первый дочерний идентификатор внутри div с помощью JQuery

Как получить первый дочерний идентификатор внутри div с помощью JQuery.

Пример кода:

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

Я хочу получить идентификатор a1.

Я попробовал $('#id1 a:first-child').html(), чтобы получить текст. Как получить идентификатор?

Ответ 1

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

Ответ 2

Ниже ответа выберет первый элемент "a" под элементом с идентификатором - "id1" (согласно заданному вопросу)

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

Ниже код будет выбирать только первый Div с идентификатором - 'id1', поэтому он будет выбирать, что div не дочерний элемент div (но это не так, как задано вопросом в ответе)

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

Ответ 3

Используйте это, чтобы получить первый элемент элемента id1:

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

Ответ 4

Если вам нужен немедленный первый ребенок, вам нужно

$(element).first();

Если вам нужен конкретный первый элемент в dom из вашего элемента, используйте ниже

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

попробуйте: http://jsfiddle.net/vgGbc/2/

Ответ 5

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

Ответ 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');

Надеюсь, это ясно и полезно.