如何使用jquery獲取第n個子值

Question

我有以下 html：

 <div id="buildyourform">

    <div class="fieldwrapper" id="field1">
        <input type="text" placeholder="Co-Author Name" class="fieldname m-wrap medium">
        <input type="text" placeholder="Co-Author Affiliation/Organization" class="fieldtype m-wrap medium">
    </div>
    <div class="fieldwrapper" id="field2">
        <input type="text" placeholder="Co-Author Name" class="fieldname m-wrap medium">
        <input type="text" placeholder="Co-Author Affiliation/Organization" class="fieldtype m-wrap medium">
    </div>

</div>

我想從 buildyourform 的每個 div 中獲取輸入框的值

<script>
    $('#buildyourform > div:nth-child(i) > input.fieldname').val()
</script>

我試過上面的代碼，但它不起作用，請幫忙。

Answer 1

您可以像下面這樣簡單地使用:eq() 。

var first = $('.fieldname:eq(0)').val()
var second = $('.fieldname:eq(1)').val()

Answer 2

取自JQuery Docs：

jQuery( ":nth-child(index/even/odd/equation)" )

:nth-child選擇器將被解析。 如果使用索引（整數），則它將返回集合中所有作為其父元素的第n個子元素的元素。 因此，取決於集合，它將返回0-n個元素 。

jQuery( ":eq(index)" )

:eq選擇器需要一個索引（整數），並將返回給定索引（在集合中）的元素，並且僅返回該元素。

:nth-child 和 :eq 之間的最大區別 ：

:nth-child選擇器將返回集合中所有作為其父項的第n個子元素的元素，而:eq將僅返回集合中給定索引處的1個元素！

Answer 3

你也可以用這個

$(".fieldname:nth-child(1)") $(".fieldname:nth-child(2)")

Answer 4

您的腳本僅獲得第一個輸入的值。
如果要獲取每個輸入的值，可以使用$ .each（）函數。

$('#buildyourform input').each(function(){
  var value = $(this).val();
  console.log(value);
});

Answer 5

起初，我正在嘗試使用jquery的第n個子屬性來解決問題，但我使用eq屬性得到了答案：

$('#buildyourform > div:eq(' + (i-1) + ') > input.fieldname').val()
$('#buildyourform > div:eq(' + (i-1) + ') > input.fieldtype').val()

此代碼將在for循環中運行。 其中“ i”是for循環的值。

Answer 6

我知道這並不完全是 OP 的意思，但這就是我最初解釋他問的問題的方式，我不明白為什么 jQuery（據我所知）不提供這樣的東西（也許我只是對jQuery不夠熟悉）

function nth(element) {
    var parent = element.parentElement;
    if(element === parent || parent === null) return 0;
    else {
        var children = parent.getElementsByTagName(element.tagName);
        for(var i=0;i<children.length;i++) if(children[i] === element) return (i+1);
    }
    return false;
}