Question

我有几个div，每个都有两个输入字段，如下所示：

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_1" />
            <input type="text" class="second" id="second_1" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_2" />
            <input type="text" class="second" id="second_2" />
        </div>
    </div>
</div>

所以，让我们说我的输入字段为second_1，并为其指定一些值：

$("#second_1").val("Hello");

如何找到类"first"的下一个输入字段？请注意，我不知道其ID，但不一定是first_2。

换句话说，我也想为first_2分配一个值，但不知道它的ID。

Answer 1

您可以采用自上而下的方法。使用:has和nextAll()

从父容器中进行处理

$('.content:has(#first_1)').nextAll('.content:has(.first)').find('.first');

＆＃13;

console.log($('.content:has(#first_1)').nextAll('.content:has(.first)').find('.first'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_1" />
            <input type="text" class="second" id="second_1" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_2" />
            <input type="text" class="second" id="second_2" />
        </div>
    </div>
</div>

＆＃13;

Answer 2

我认为这就是你想要的。

var nextFirst = $("#second_1").closest('content').next().find('.first');

使用closest(..).next()获取下一行输入。

Answer 3

试试这段代码：

var myInputs = document.getElementsByClassName("first");
for (var i = 0; i < myInputs.length; ++i) {
    var item = myInputs[i];  
    item.value = 'your value';
}

＆＃13;

            var myInputs = document.getElementsByClassName("first");
			for (var i = 0; i < myInputs.length; ++i) {
				var item = myInputs[i];  
				item.value = 'your value';
			}

＆＃13;

    <div id="wrapper">
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_1" />
            <input type="text" class="second" id="second_1" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_2" />
            <input type="text" class="second" id="second_2" />
        </div>
    </div>

＆＃13;

Answer 4

使用@testimonial = current_user.testimonials.new(testimonial_params) @testimonial.save，您可以找到类parents().next().find(...).first()的下一个输入，无论HTML树有多深，也不是父元素的类或类型。

"first"

$('#second_1').parents().next().find(".first").first().val("Hello");

$('#second_1')
  .val("Starting here")
  .parents().next().find(".first").first().val("Hello");

div { padding: 2px; }
#wrapper { border: 1px grey solid; }
.subcontent { border: 1px grey dashed; }

查找特定类的下一个输入字段

4 个答案: