javascript - jqueryでparent()とsibling()を一緒に使用する方法

Question

私はこのような2つのdivを持っています:

<div class="content">
    <label>First Name</label>
    <input name="firstName" id="firstName" type="text"  class="input firstName" />
</div>

<div class="footer">
    <button type="button" value="edit" id="Esubmit" class="button">Save</button>
</div>

jQueryの力を使用してparent()、sibling()「保存」ボタンがクリックされたときに「firstname」の値を取得するにはどうすればよいですか。

私はこれを試しましたが、うまくいきません：

$('#Esubmit').click(function () {
    var first = $(this).parent().siblings('.content > input#firstName').eq(0);
    alert(first.val());
});

私はあなたが言うことができることを知っています

var first = $('#firstName').val();

しかし、私が兄弟や親と一緒にそれをしなければならない特定の理由があります.

Answer 1

完全なセレクターではなく、フィルター セレクターを の引数として渡します.siblings()。使用する：

var first = $(this).parent().siblings('.content').children('input#firstName');

Answer 2

次のコード

$('#Esubmit').click(function () {
    var first = $(this).parent().siblings('.content').children('input#firstName');// by parent and sibling
    alert(first.val());
});

参照兄弟

Answer 3

質問の DOM 構造を使用すると、次の jQuery 関数の文字列を使用して firstName を参照できます。

$(this).parent().siblings('.content').children('#firstName').val()

Answer 4

このようなことを試してください

            $('#Esubmit').click(function () 
            {
                var first = $(this).parent().prev().find('input#firstName');
                alert(first.val());
            });