Question

在下面的示例中，它是第4个未根据css对齐的元素。

＆＃13;

$( "span" ).each(function( index ) {
  
  $(".edit").append('<input class="inputtext" type="text" value="' + $(this).text() +
	'" name="'+index+'" id="input_'+$(this).attr("id")+'"/></br>');
  });

  
  $('.inputtext').on('keyup',function(){
    var abc = $(this).val();
    console.log(abc);
   	var id= $(this).attr('id').split('_')[1];
    $('#'+id).text(abc);
});

＆＃13;

.editable:nth-child(1) {
  top:10px;
  left:50px;
}

.editable:nth-child(2){
  top:30px;
  left:50px;
}
  
.editable:nth-child(3) {
  top:60px;
  left:50px;
}

.editable:nth-child(4) {
  top:90px;
  left:50px;
}

.editable:last-child {
  top:120px;
  left:50px;
}

.text {
  color:#FFFFFF; 
  background-color:black;
  position:absolute;
  padding:5px;
}

.photoStyle {
  height:500px;
  width:600px;
}

.edit {
  border:2px solid black;
  width:600px;
}

.inputtext {
  height:25px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
    <img src="http://bloximages.newyork1.vip.townnews.com/stltoday.com/content/tncms/assets/v3/editorial/8/12/8126e948-17fe-5102-b12f-908660e0f7e4/57d981d98e495.image.jpg?resize=1200%2C679" class="photoStyle" />
   
    <span class="text editable" id="t1">1</span> 
    <span class="text editable" id="t2">2</span> 
    <span class="text editable" id="t3">3</span> 
    <span class="text editable" id="t4">4</span> 
    <span class="text editable" id="t5">5</span> 
</div>

<div class="edit"></div>

＆＃13;

Answer 1

它正常工作。规则是说，类editable的元素是父元素下的第4个元素。第一个孩子是img，而不是第一个span。

Answer 2

您没有考虑img元素，即该组中的第一个孩子。将数字调整为1并且有效。

$( "span" ).each(function( index ) {
  
  $(".edit").append('<input class="inputtext" type="text" value="' + $(this).text() +
	'" name="'+index+'" id="input_'+$(this).attr("id")+'"/></br>');
  });

  
  $('.inputtext').on('keyup',function(){
    var abc = $(this).val();
    console.log(abc);
   	var id= $(this).attr('id').split('_')[1];
    $('#'+id).text(abc);
});

.editable { left:50px; }
.editable:nth-child(2) { top:10px; }
.editable:nth-child(3) { top:30px; }
.editable:nth-child(4) { top:60px; }
.editable:nth-child(5) { top:90px; color:yellow;}
.editable:last-child { top:120px; }

.text {
  color:#FFFFFF; 
  background-color:black;
  position:absolute;
  padding:5px;
}

.photoStyle {
  height:500px;
  width:600px;
}

.edit {
  border:2px solid black;
  width:600px;
}

.inputtext { height:25px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
    <img src="http://bloximages.newyork1.vip.townnews.com/stltoday.com/content/tncms/assets/v3/editorial/8/12/8126e948-17fe-5102-b12f-908660e0f7e4/57d981d98e495.image.jpg?resize=1200%2C679" class="photoStyle" />
   
    <span class="text editable" id="t1">1</span> 
    <span class="text editable" id="t2">2</span> 
    <span class="text editable" id="t3">3</span> 
    <span class="text editable" id="t4">4</span> 
    <span class="text editable" id="t5">5</span> 
</div>

<div class="edit"></div>

你也可以只包装自己<span>中的<div>元素并保留所有数字，因为img将不再是该组中的孩子。

<div class="menu">
    <img src="http://bloximages.newyork1.vip.townnews.com/stltoday.com/content/tncms/assets/v3/editorial/8/12/8126e948-17fe-5102-b12f-908660e0f7e4/57d981d98e495.image.jpg?resize=1200%2C679" class="photoStyle" />

  <!-- By wrapping all the spans in their own div, the numbers work as expected. -->
  <div>
    <span class="text editable" id="t1">1</span> 
    <span class="text editable" id="t2">2</span> 
    <span class="text editable" id="t3">3</span> 
    <span class="text editable" id="t4">4</span> 
    <span class="text editable" id="t5">5</span> 
  </div>
</div>

Answer 3

如果您不知道元素的位置，可以使用:nth-of-type(x)选择它们。

此处:nth-child(1)指的是图片：）

.editable {
  left:50px;
 }

.editable:nth-of-type(1) {
  top:10px;
}

.editable:nth-of-type(2){
  top:30px;
}
  
.editable:nth-of-type(3) {
  top:60px;
}

.editable:nth-of-type(4) {
  top:90px;
}

.editable:nth-of-type(5) {
  top:120px;
}

.text {
  color:#FFFFFF; 
  background-color:black;
  position:absolute;
  padding:5px;
}

.photoStyle {
  height:500px;
  width:600px;
}

.edit {
  border:2px solid black;
  width:600px;
}

.inputtext {
  height:25px;
}

<div class="menu">
    <img src="http://bloximages.newyork1.vip.townnews.com/stltoday.com/content/tncms/assets/v3/editorial/8/12/8126e948-17fe-5102-b12f-908660e0f7e4/57d981d98e495.image.jpg?resize=1200%2C679" class="photoStyle" />
   
    <span class="text editable" id="t1">1</span> 
    <span class="text editable" id="t2">2</span> 
    <span class="text editable" id="t3">3</span> 
    <span class="text editable" id="t4">4</span> 
    <span class="text editable" id="t5">5</span> 
</div>

<div class="edit"></div>

Answer 4

第4个.editable范围与任何CSS选择器都不匹配，因为它实际上是其父级的第5个子级。 img元素是那里的第一个孩子。

如果你想重做这个，那么它只取决于其他.editable元素，你可以这样做：

.editable {top:10px; left:50px;}
.editable + .editable {top:30px;}
.editable + .editable + .editable {top:60px;}
.editable + .editable + .editable + .editable {top:90px;}
.editable + .editable + .editable + .editable + .editable {top:120px;}

使用+（adjacent sibling selector）。

为什么css nth-child对最后一个元素不起作用？

4 个答案: