Question

我有这个html结构：

<div class="main">
    <div class="content">
        <input type="text" value="Hello World...">
        <div class="subContent">
            <button id="myButton">Get Input Value</button>
        </div>
    </div>
    <div class="content">
        <input type="text" value="Hello World...">
        <div class="subContent">
            <button id="myButton">Get Input Value</button>
        </div>
    </div>
</div>

我尝试按下按钮获取最近输入的值！我不能使用class或id，因为这些元素将重复使用相同的类名！

我尝试过类似的事情：

$('button').click(function() {
    $(this).parent().find('input').val();
});

但我没有成功！

谢谢！

Answer 1

你很亲密。 .parent()只上升一级（向父级）。相反，您可以将其更改为.closest()或.parents()。

例如：

$(this).closest('div.content').find('input').val();

＆＃13;

$('button').click(function() {
    console.log( $(this).closest('div.content').find('input').val() );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="content">
        <input type="text" value="Hello World...">
        <div class="subContent">
            <button id="myButton">Get Input Value</button>
        </div>
    </div>
    <div class="content">
        <input type="text" value="Hello World...">
        <div class="subContent">
            <button id="myButton">Get Input Value</button>
        </div>
    </div>
</div>

＆＃13;

Answer 2

您可以使用.parents('selector')注意最后的s，并将选择器作为参数传递：

$(this).parents('div.content').find('input').val();

代码：

$('button').click(function() {
    console.log( $(this).parents('div.content').find('input').val() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="content">
        <input type="text" value="Hello World...">
        <div class="subContent">
            <button id="myButton">Get Input Value</button>
        </div>
    </div>
    <div class="content">
        <input type="text" value="Hello World...">
        <div class="subContent">
            <button id="myButton">Get Input Value</button>
        </div>
    </div>
</div>

在子div中查找输入值

2 个答案: