jquery выбрать ближайший div с идентификатором, начиная с

Question

Используя jquery, я пытаюсь найти ближайший элемент div
Каждая строка имеет свой div (ui_form_1, ui_form_2 и т. Д.)
когда пользователь нажимает на эту строку, соответствующий div должен сказать «selected»
Iя пытаюсь найти ближайший div с идентификатором, начинающимся с ui_form
и изменить его текст,

Это то, что я пробовал до сих пор:

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

Вы должны искать в .siblings() из .parent(), а не в .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>