How can I select a div in second level?

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>

I have this html code.And I want this jquery code:

    $(".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
        }
    });

Now I want to select #cost that is in the div#class.How can I select it in the marked place?

Answer 1

To just select it:

$('#class #cost')

As others have pointed out, $('#cost') should be enough, as ids are supposed to be unique on the page. However, if your script is in an external file that can be included in several pages, this nesting of #id selectors allows to target exactly this div on the correct page.

Answer 2

First of all, if you are using IDs, it should be unique on the WHOLE page. So, #cost shouldn't be present anywhere on the same page.

Otherwise, you should make it a class , in which case, you can use $("#class .cost");

If you are still going to use the ID itself, you just have to use $("#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

You can directly select it like :

$(".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

As you have id assigned to the target so:

$("#cost")

and these:

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

and this way too:

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

Answer 8

#cost is the previous node of the parent div

.parent will up to the parent node and .prev will select previous node

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

and with keep chaining

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