Question

<div id="class" style="cursor: pointer">
    <label id="cost">@Html.DisplayFor(modelItem => item.Cost)</label>
    <div class="no" hidden="hidden">
        <input type="text" id='@item.PriceId' class="text" style="text-align:center;" onkeypress="if(event.keyCode==13)" value='@item.Cost.ToString()' />
    </div>
</div>

我有这个HTML代码。我想要这个jquery代码：

    $(".text").live("keypress",function (event) {
        if (event.which == 13) {
            event.preventDefault();
            $.getJSON('/Price/AjaxPriceEdit', { id: $(this).attr("id"), cost: $(this).val() }, function (data) {
            });
            $(this).hide();
            //Here I want to show #cost
        }
    });

现在我想选择div＃class中的#cost。如何在标记的位置选择它？

Answer 1

只需选择它：

$('#class #cost')

正如其他人所指出的那样，$('#cost')应该足够了，因为id应该在页面上是唯一的。但是，如果您的脚本位于可以包含在多个页面中的外部文件中，则#id选择器的这种嵌套允许在正确的页面上准确定位此div。

Answer 2

首先，如果您使用的是ID，那么它在WHOLE页面上应该是唯一的。因此，#cost不应出现在同一页面的任何位置。

否则，您应该将其设为class，在这种情况下，您可以使用$("#class .cost");

如果您仍然要使用ID本身，则只需使用$("#cost")。

Answer 3

您可以直接选择它，因为它有一个标识符：

$('#cost')

Answer 4

 $(".text").live("keypress",function (event) {
        if (event.which == 13) {
            event.preventDefault();
            $.getJSON('/Price/AjaxPriceEdit', { id: $(this).attr("id"), cost: $(this).val() }, function (data) {
            });
            $(this).hide();
            var cost = $('#class #cost').html();
            alert(cost); //This will display the actual cost value in an alert, do with it what you please!
        }
    });

Answer 5

你可以直接访问id为id的元素，因为id是唯一的，如果你有重复的具有相同id的html块，你可以使用prev来获取兄弟的标签而不需要id。

alert($(this).prev('label').text());

Answer 6

您可以直接选择它：

$(".text").live("keypress",function (event) {
        if (event.which == 13) {
            event.preventDefault();
            $.getJSON('/Price/AjaxPriceEdit', { id: $(this).attr("id"), cost: $(this).val() }, function (data) {
            });
            $(this).hide();
           $('#cost').show(); // or whatever you want to do with it
        }
    });

Answer 7

正如您id分配给目标所以：

$("#cost")

和这些：

$('#class #cost')
$('#class').children('#cost')
$('#class').find('#cost')

也是这样：

$(this).parent().siblings('#cost')

Answer 8

#cost是父div的前一个节点

.parent将到达父节点，.prev将选择上一个节点

$(this).hide();
$(this).parent().prev().show();

并保持链接

$(this).hide().parent().prev().show();

如何选择二级div？

8 个答案: