Question

我有一个类似html的HTML。

<tr class="meta-info" id="${page.id}">
    <td>
        <div class="pull-left">
         <font size="1">
             <a href="javascript:void(0)" class="like">Like</a>
         </font>
         </div>
         <div class="pull-right" style="font-size:1">
         <span class="badge"><i class="icon-thumbs-up"></i>1</span>          
         </div>
    </td>
</tr>

我试图增加用户在Like超链接上的喜欢次数。

这是我的jquery代码。我想知道如何从jquery对象中获取html元素。

$(".like").click(function(event){
    var parentTr = $(event.target).closest("tr");
    if(parentTr.length){
        var pageId = parentTr.attr("id");
        var spanEle = parentTr.get(0)+" div span:first-child"; ------(1)
        var lastNumber =  parseInt(spanEle.text());
        spanEle.text(lastNumber+1);
    }
});

我不知道我是否在线上标记为1。

Answer 1

尝试： Fiddle

var lastNumber = parseInt(parentTr.find('.pull-right span').text(), 10);

您的代码如下：

$(".like").click(function(event) {
    var parentTr = $(event.target).closest("tr");
    if (parentTr.length) {
        var pageId = parentTr.attr("id");
        var spanEle = parentTr.find('.pull-right span');
        var lastNumber =  parseInt(spanEle.text(), 10);
        spanEle.text(lastNumber + 1);
     }
});

更新：如果您希望保留<i>标记，请使用：

spanEle.html(spanEle.html().replace(lastNumber, lastNumber + 1));

代替：spanEle.text(lastNumber + 1);

Sample

Answer 2

试试这个......

$(".like").click(function(event) {
    var parentTr = $(event.target).closest("tr");
    if (parentTr.length) {
        var pageId = parentTr.attr("id");
        var spanEle = parentTr.first('.badge');
        var lastNumber =  parseInt(spanEle.text(), 10);
        spanEle.text(lastNumber + 1);
    }
});

如果span元素始终具有该类名，那么它将找到第一个（仅？）并且返回文本的int值。

Answer 3

我认为您需要添加额外的<span>代码，以便您可以在不触及相邻图标的情况下替换计数

<span class="badge"><i class="icon-thumbs-up"></i>
    <span class="like-count">1</span>
</span>

然后你可以解决它

$(".like").click(function() {
    var spanEle = $(this).closest('tr').find('.like-count').first();
    if (spanEle.length) {
        var newCount = parseInt(spanEle.text());
        spanEle.text(newCount + 1);
    }
});

在事件处理程序中，this引用为event.target。

，你可能能够处理元素不存在的情况，但这种方式更安全。

JSFiddle演示：http://jsfiddle.net/rupw/VfCvK/

如何从jquery对象获取html元素

3 个答案: