Как выбрать div на втором уровне?

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 code.And Я хочу это 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 
     } 
    }); 

Теперь я хочу, чтобы выбрать #cost, который находится в DIV # class.How можно выбрать его в обозначенном месте?

Answer 1

Чтобы просто выбрать его:

$('#class #cost') 

Как уже отмечалось, $('#cost') должно быть достаточно, так как идентификаторы должны быть уникальными на этой странице. Однако, если ваш скрипт находится во внешнем файле, который может быть включен в несколько страниц, это вложение из #id селекторов позволяет точно настроить этот div на правильной странице.

Answer 2

Прежде всего, если вы используете идентификаторы, он должен быть уникальным на странице WHOLE. Итак, #cost не должен присутствовать нигде на той же странице.

В противном случае, вы должны сделать это class, в этом случае, вы можете использовать $("#class .cost");

Если вы все еще собираетесь использовать сам идентификатор, вы просто должны использовать $("#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

можно непосредственно получить доступ к элементу с идентификатором, как идентификатор является уникальным, если вы повторили HTML блоки с одинаковыми идентификаторами, Вы можете используйте prev, чтобы получить ярлык, который является родным братом, и ему не нужен идентификатор.

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();