nth-of-type
работает в соответствии с индексом того же типа элемента, но nth-child
работает только в соответствии с индексом независимо от того, какой тип элементов сиблингов.
Например
<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
Предположим, что в выше html мы хотим скрыть все элементы, имеющие класс отдыха.
В этом случае nth-child
и nth-of-type
будут работать точно так же, как и все элементы одного типа, <div>
, поэтому css должен быть
.rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
display:none;
}
OR
.rest:nth-of-type(6), .rest:nth-of-type(7), .rest:nth-of-type(8), .rest:nth-of-type(9), .rest:nth-of-type(10){
display:none;
}
Теперь вам должно быть интересно узнать, в чем разница между nth-child
и nth-of-type
, так что это разница
Предположим, что html is
<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
В приведенном выше html тип элемента .rest
отличается от других .rest
- это абзацы, а другие - div, поэтому в этом случае if вы используете nth-child
, вы должны писать так
.rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
display:none;
}
, но если вы используете nss-тип css, это может быть
.rest:nth-of-type(1), .rest:nth-of-type(2), .rest:nth-of-type(3), .rest:nth-of-type(4), .rest:nth-of-type(5){
display:none;
}
Как тип Элементом
blockquote >.rest
является<p>
, поэтому здесьnth-of-type
обнаруживает тип.rest
, а затем он накладывает css на 1-й, 2-й, 3-й, 4-й, 5-й элементы<p>
.
Вместо:
data: "id=" + thisId + "&value=" + thisValue
do:
data: { id: thisId, value: thisValue }
Таким образом, jquery позаботится о правильном кодировании значений URL. Конкатенации строк являются корнем всего зла: -)
Настоятельно рекомендуем вам использовать решение , предоставленное Дарином выше, если это возможно; Таким образом, вы можете повторно использовать хорошо проверенный код для построения POST
данных.
Но если вам действительно нужно использовать конкатенацию строк (здесь или в другом месте вашего приложения при построении строк запроса или POST
данных из пользовательских данных), вам нужно использовать encodeURIComponent
:
$("textarea").blur(function(){
var thisId = $(this).attr("id");
var thisValue = $(this).val();
$.ajax({
type: "POST",
url: "some.php",
data: "id=" + encodeURIComponent(thisId) + "&value=" + encodeURIComponent(thisValue),
success: function(){
alert( "Saved successfully!" );
}
});
});
По умолчанию при отправке POST
с jQuery.ajax
вы отправляете данные с типом контента application/x-www-form-urlencoded
, что означает, что вы обещая, что данные закодированы таким образом. Вы должны быть уверены, что сохранили свою часть сделки и фактически закодировали ее. Это не просто важно для амперсандов.
$.ajax({
type:'POST',
dataType: "text",
url:'save.php',
data:'_id='+$('#id').val()+'&title='+$('#title').val(),
??
data: { id: thisId, value: thisValue }
просто используйте функцию javascript encodeURIComponent()
:
$("textarea").blur(function(){
var thisId = $(this).attr("id");
var thisValue = $(this).val();
$.ajax({
type: "POST",
url: "some.php",
data: "id=" + thisId + "&value=" + encodeURIComponent(thisValue),
success: function(){
alert( "Saved successfully!" );
}
});
});