jquery 选择ID 开头的最近 div

Question

使用 jquery 我正在尝试找到最接近的div 元素
每行都有其div(ui_form_1、ui_form_2 等(
当用户单击选择此行时，相应的div 应显示"已选择">
我正在尝试查找 ID 以 ui_form
开头的最接近的div 并修改其文本，

这是我到目前为止尝试过的：

selectTypeFormDiv = selectButton.parent().next('div[id^="ui_form_"]');

由于某种原因它不起作用，代码：

function selectTypeClick(selectButton) {
alert('selectTypeClick');
selectTypeFormDiv = selectButton.parent().next('div[id^="ui_form_"]');
selectTypeFormDiv.text("selected!!");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<ol>
<li>
<div class="container">
<input type="hidden" id="typeSave" name="typeSave" value="">
<div class="form-group row">
<div class="col-xs-1"><button class="btn btn-primary">button1</button></div>
<div class="col-xs-2">
<input type="text" class="form-control" aria-describedby="inputGroup-sizing-sm" />
</div>
<div class="col-xs-2">
<button class="btn btn-primary" data-toggle="modal" data-target="#typeModal" onclick="javascript:selectTypeClick($(this))">
					<i class="fa fa-home"></i>
					<span style="width:3em;">
						</span>Select this line
				</button>
</div>
<div class="col-xs-1">
<button class="btn btn-secondary" onclick="alert('this is doing something')">button2</button>
</div>
<div class="col-xs-1" id="ui_form_1">not selected</div>
</div>
</div>
</li>
<li>
<div class="container">
<input type="hidden" id="typeSave" name="typeSave" value="">
<div class="form-group row">
<div class="col-xs-1"><button class="btn btn-primary">button1</button></div>
<div class="col-xs-2">
<input type="text" class="form-control" aria-describedby="inputGroup-sizing-sm" />
</div>
<div class="col-xs-2">
<button class="btn btn-primary" data-toggle="modal" data-target="#typeModal" onclick="javascript:selectTypeClick($(this))">
					<i class="fa fa-home"></i>
					<span style="width:3em;">
						</span>Select this line
				</button>
</div>
<div class="col-xs-1">
<button class="btn btn-secondary" onclick="alert('this is doing something')">button2</button>
</div>
<div class="col-xs-1" id="ui_form_2">not selected</div>
</div>
</div>
</li>
<li>
<div class="container">
<input type="hidden" id="typeSave" name="typeSave" value="">
<div class="form-group row">
<div class="col-xs-1"><button class="btn btn-primary">button1</button></div>
<div class="col-xs-2">
<input type="text" class="form-control" aria-describedby="inputGroup-sizing-sm" />
</div>
<div class="col-xs-2">
<button class="btn btn-primary" data-toggle="modal" data-target="#typeModal" onclick="javascript:selectTypeClick($(this))">
					<i class="fa fa-home"></i>
					<span style="width:3em;">
						</span>Select this line
				</button>
</div>
<div class="col-xs-1">
<button class="btn btn-secondary" onclick="alert('this is doing something')">button2</button>
</div>
<div class="col-xs-1" id="ui_form_3">not selected</div>
</div>
</div>
</li>
<li>
<div class="container">
<input type="hidden" id="typeSave" name="typeSave" value="">
<div class="form-group row">
<div class="col-xs-1"><button class="btn btn-primary">button1</button></div>
<div class="col-xs-2">
<input type="text" class="form-control" aria-describedby="inputGroup-sizing-sm" />
</div>
<div class="col-xs-2">
<button class="btn btn-primary" data-toggle="modal" data-target="#typeModal" onclick="javascript:selectTypeClick($(this))">
					<i class="fa fa-home"></i>
					<span style="width:3em;">
						</span>Select this line
				</button>
</div>
<div class="col-xs-1">
<button class="btn btn-secondary" onclick="alert('this is doing something')">button2</button>
</div>
<div class="col-xs-1" id="ui_form_4">not selected</div>
</div>
</div>
</li>
</ol>

Answer 1

您应该在.parent()的.siblings()中搜索，而不是父级的.next()div。

selectButton.parent().siblings('div[id^="ui_form_"]');

有关详细信息，请查看两者的文档。这是工作片段 -

function selectTypeClick(selectButton) {
selectTypeFormDiv = selectButton.parent().siblings('div[id^="ui_form_"]');
selectTypeFormDiv.text("selected!!");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<ol>
<li>
<div class="container">
<input type="hidden" id="typeSave" name="typeSave" value="">
<div class="form-group row">
<div class="col-xs-1"><button class="btn btn-primary">button1</button></div>
<div class="col-xs-2">
<input type="text" class="form-control" aria-describedby="inputGroup-sizing-sm" />
</div>
<div class="col-xs-2">
<button class="btn btn-primary" data-toggle="modal" data-target="#typeModal" onclick="javascript:selectTypeClick($(this))">
					<i class="fa fa-home"></i>
					<span style="width:3em;">
						</span>Select this line
				</button>
</div>
<div class="col-xs-1">
<button class="btn btn-secondary" onclick="alert('this is doing something')">button2</button>
</div>
<div class="col-xs-1" id="ui_form_1">not selected</div>
</div>
</div>
</li>
<li>
<div class="container">
<input type="hidden" id="typeSave" name="typeSave" value="">
<div class="form-group row">
<div class="col-xs-1"><button class="btn btn-primary">button1</button></div>
<div class="col-xs-2">
<input type="text" class="form-control" aria-describedby="inputGroup-sizing-sm" />
</div>
<div class="col-xs-2">
<button class="btn btn-primary" data-toggle="modal" data-target="#typeModal" onclick="javascript:selectTypeClick($(this))">
					<i class="fa fa-home"></i>
					<span style="width:3em;">
						</span>Select this line
				</button>
</div>
<div class="col-xs-1">
<button class="btn btn-secondary" onclick="alert('this is doing something')">button2</button>
</div>
<div class="col-xs-1" id="ui_form_2">not selected</div>
</div>
</div>
</li>
<li>
<div class="container">
<input type="hidden" id="typeSave" name="typeSave" value="">
<div class="form-group row">
<div class="col-xs-1"><button class="btn btn-primary">button1</button></div>
<div class="col-xs-2">
<input type="text" class="form-control" aria-describedby="inputGroup-sizing-sm" />
</div>
<div class="col-xs-2">
<button class="btn btn-primary" data-toggle="modal" data-target="#typeModal" onclick="javascript:selectTypeClick($(this))">
					<i class="fa fa-home"></i>
					<span style="width:3em;">
						</span>Select this line
				</button>
</div>
<div class="col-xs-1">
<button class="btn btn-secondary" onclick="alert('this is doing something')">button2</button>
</div>
<div class="col-xs-1" id="ui_form_3">not selected</div>
</div>
</div>
</li>
<li>
<div class="container">
<input type="hidden" id="typeSave" name="typeSave" value="">
<div class="form-group row">
<div class="col-xs-1"><button class="btn btn-primary">button1</button></div>
<div class="col-xs-2">
<input type="text" class="form-control" aria-describedby="inputGroup-sizing-sm" />
</div>
<div class="col-xs-2">
<button class="btn btn-primary" data-toggle="modal" data-target="#typeModal" onclick="javascript:selectTypeClick($(this))">
					<i class="fa fa-home"></i>
					<span style="width:3em;">
						</span>Select this line
				</button>
</div>
<div class="col-xs-1">
<button class="btn btn-secondary" onclick="alert('this is doing something')">button2</button>
</div>
<div class="col-xs-1" id="ui_form_4">not selected</div>
</div>
</div>
</li>
</ol>