javascript - 如何在具有已知类名的特定行第一次出现之后/之前移动行？

Question

我有一个与 upArrow 绑定(bind)的 JS 事件:

$('body').on('click', '.UpArrow', function(event) {
    		var row = $(this).closest('tr');
            row.insertBefore(row.prev());
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="placeholderRow NameServiceRow">
  <td class="UpArrow"></td>
  <td class="DownArrow"></td>
  <td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
  <td class="UpArrow"></td>
  <td class="DownArrow"></td>
  <td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
  <td class="UpArrow"></td>
  <td class="DownArrow"></td>
  <td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow">
  <td class="UpArrow"></td>
  <td class="DownArrow"></td>
  <td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>

我想要做的是将 TR 移到类名 NameServiceRow

的 TR 之上

我已经尝试了多种解决方案，但没有一个对我有用，如果您有任何解决方案，我洗耳恭听。

编辑:

我可能有多行带有类名NameServiceRow，所以我想要的是将其移动到该类名第一次出现的上方

Answer 1

正在寻找类似的东西吗？如果您需要将当前 tr 移动到类“NameServiceRow”出现在单击的 tr 上方，则此代码可能有效。

$(document).on('click', '.UpArrow', function(event) {
    var row = $(this).closest('tr');
    if(!row.hasClass('NameServiceRow')){
         var parentDiv = row.prevAll('.NameServiceRow:first');
         row.insertBefore(parentDiv);
         row.addClass("NameServiceRow");
         parentDiv.removeClass("NameServiceRow");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
	<tr class="placeholderRow NameServiceRow">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="A 1" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow inlineService">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="A 2" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow inlineService">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="A 3" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="A 4" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow NameServiceRow">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="B 1" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow inlineService">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="B 2" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow inlineService">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="B 3" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="B 4" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow NameServiceRow">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="C 1" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow inlineService">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="C 2" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow inlineService">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="C 3" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="C 4" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
</table>

您可以使用

决定是否更改类别

row.addClass("NameServiceRow");
parentDiv.removeClass("NameServiceRow");