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块，并达到此结果：

<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的解决方案很好，但我还希望看到一个解决方案将块附加到最低值，并且将独立于对表进行排序的第一个函数。原因是我可能想要在不进行任何排序的情况下附加块。

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>

或者使用sort：

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

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

在排序之前附加它不会解决目的，因为你不会非常确定最小值在哪里，在最后，在顶部或在中间的某个地方。

Answer 2

$(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').first().find("input[name='pr']").after('<p class="min">Min. Value</p>');
});

Answer 3

首先使用最小值搜索输入：

var minValue = Math.min.apply( null, $("input[name='pr']").map(function(){return this.value;}) );

然后使用此值附加到输入：

.appendTo("input[value='" + minValue + "']")

将HTML块附加到具有最低值的元素？

3 个答案: