javascript - 将 HTML block 附加到具有最低值的元素？

Question

我有下表:

<table id="sortme">
      <tr>
        <td>a</td>
        <td>b <input type="hidden" name="pr" value="50"/>
          </td>
      </tr>
      <tr>
        <td>c</td>
        <td>d <input type="hidden" name="pr" value="20"/>
          </td>
      </tr>
</table>

使用以下脚本:

$(function () {
  $('#sortme tr:has(input[name="pr"])').sort(function(a, b) {
    return 1 * $(a).find("input[name='pr']").val() - 1 * $(b).find("input[name='pr']").val();
  }).appendTo('#sortme');
});

该表将重新排序，以便第二行将成为第一行，因为 20 < 50 .

问题:

除此之外，我怎样才能在 [input] 之后附加一个 HTML block ？被发现是最低的，并达到这个结果:

<table id="sortme">
      <tr>
        <td>c</td>
        <td>d <input type="hidden" name="pr" value="20"/> 
        <p class="min">Min. Value</p>
          </td>
      </tr>
      <tr>
        <td>a</td>
        <td>b <input type="hidden" name="pr" value="50"/>
          </td>
      </tr>
</table>

我想我应该添加一些.appendTo("input[name='pr']")命令作为脚本的最后一行，但不确定如何执行。

编辑:

虽然 Sachin 的解决方案很好，但我还希望看到一种将 block 附加到最低值的解决方案，并且独立于对表进行排序的第一个函数。原因是我可能想附加 block 而不进行任何排序。

Answer 1

尝试这个..如果你想不排序:

$(function () {
  var min = $("#sortme input[name='pr']:first").val()
  $("#sortme input[name='pr']").each(function(){
       if(parseInt($(this).val()) < parseInt(min))
           min = $(this).val();
  });
$('<p class="min">Min. Value</p>').insertAfter("#sortme input[name='pr'][value='" + min + "']:first");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="sortme" border="1|0">
      <tr>
        <td>a</td>
        <td>b <input type="hidden" name="pr" value="50"/>
          </td>
      </tr>
      <tr>
        <td>c</td>
        <td>d <input type="hidden" name="pr" value="20"/>
          </td>
      </tr>
</table>

或者排序:

排序后..这将在表格的第一次输入后插入 p 标记，因为排序后最小值将位于顶部。

$('<p class="min">Min. Value</p>').insertAfter("#sortme input:first");

在排序之前附加它并不能解决目的，因为你不太确定最小值在哪里，在最后、在顶部还是在中间的某个地方。