我有下表:
<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 而不进行任何排序。
最佳答案
尝试这个..如果你想不排序:
$(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");
在排序之前附加它并不能解决目的,因为你不太确定最小值在哪里,在最后、在顶部还是在中间的某个地方。
关于javascript - 将 HTML block 附加到具有最低值的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34905912/