Question

我正在尝试选择类.formRow大于定义变量（x）的所有元素。如何在标签内调用变量？

    $(document).ready(function(){
  var x = 1;
  $('.formRow:nth('x') ~ .formRow').toggleClass('subEdit');

});

Answer 1

应该是+。此外，您需要使用$(document).ready(function(){ var x = 1; $('.formRow:nth-child('+x+') ~ .formRow').toggleClass('subEdit'); });将字符串与变量组合在一起：

x=3

请注意，这不是类选择器。因此，如果.formRow，它将不会选择第三个.formRow。它将选择也具有$('.formRow').eq(x)类的第三个孩子！如果您正在寻找，请使用

<form action="file2.php" method="POST">
<textarea rows="4" cols="50" name="data[]"> </textarea>
<input type="submit" value="Submit">
</form>

Answer 2

使用：

$('.formRow:gt('+x+')').toggleClass('subEdit');

其中'x'是基于0的索引。

阅读：https://api.jquery.com/gt-selector/

var x = 3; // from 0 to 3 indices. 
$('.myDiv:gt('+x+')').toggleClass('color'); // gt, i.e. greater than x (0 based)

.color {
  border: 2px red solid;
}

div{
  border: 2px green solid;
  display:inline-block;
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>

Answer 3

你可以使用nth-of-type，以防你有一个错误类的兄弟元素

$(document).ready(function() {
  var x = 5;
  $('.formRow:nth-of-type(' + x + ') ~ .formRow').toggleClass('subEdit');
});

div {
  height: 50px;
  width: 100%;
  margin: 5px 0;
  box-sizing: border-box
}
.formRow {
  background: red
}
.foo-bar {
  background: blue
}
.subEdit {
  border: 10px solid green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="formRow"></div>
<div class="formRow"></div>
<div class="formRow"></div>
<div class="foo-bar"></div>
<div class="formRow"></div>
<div class="formRow"></div>
<div class="formRow"></div>
<div class="formRow"></div>
<div class="formRow"></div>
<div class="formRow"></div>
<div class="formRow"></div>

Answer 4

$(document).ready(function(){
    var x = 2;
    $('.formRow:nth(' + x + ') ~ .formRow').toggleClass('subEdit');
});

只需添加连接+即可使用变量。

使用变量作为第n个选择器？

4 个答案: