Question

我有一个像这样的HTML结构：

<div data-month="january"></div>
<div data-month="february"></div>
<div data-month="march"></div>
<div data-month="april"></div>

但是div周围有很多HTML结构。

现在，我知道如何选择数据月份，例如：$('[data-month=february])获取带有div的jQuery对象，数据月份为2月。

现在，想象一下，我目前已经选择了上面这个二月级的div，有没有办法让第二个邻居来到这里。（右边的div-position）？

我尝试使用eq()函数，但这不能从当前对象开始。（我真的需要从特定的数据月开始，并且不要事先知道索引。）

Answer 1

简单！像这样使用.next（）两次：

EDIT

TV     Radio    Newspaper    Sales
230.1  37,8       69.2       22.4
44.5   39.3       45.1       10.1
...    ...        ...        ...
25      15        15
30      20        22
35      22        36

更多信息here

更通用的方法是使用$("[data-month='february']").next().next()查找当前项目的索引，为其添加偏移量，然后像这样使用index()：

parent().children().eq()

Answer 2

更新

尝试使用.siblings()，filter，index

＆＃13;

var current = $("[data-month=february]"), collection = "[data-month]";
var selected = current.siblings(collection).filter(function(i, el) {
   return $(el).index(collection) === current.index(collection) + 2
});

current.add(selected).css("color", "blue");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div data-month="january">january</div>
<div data-month="february">february</div>
<div data-month="march">march</div>
<div data-month="april">april</div>

＆＃13;

Answer 3

我创建了一个使用nth-child xengravity.com/demo/nth-child/的交互式演示。

使用nth-child我创建了适合您情况的以下代码段：

＆＃13;

function UpdateMonthSelection(numberOfMonths){
	var index = $("[data-month='february']").index();
	var newIndex = index + numberOfMonths + 1; //added +1 because nth-child counts from 1 and not 0.

	$("[data-month='february']").css('background','red');
	$("[data-month]:nth-child(" + newIndex + ")").css('background','yellow');
}

//Code specific to dropdown selection
$('select').on('change',function(){
  var selection = $(this).val();
  selection = Number(selection);

  UpdateMonthSelection(selection);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Select 
<select>
  <option value="0"></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
Months After Febuary 

<p>
  <div data-month="january">january</div>
  <div data-month="february">february</div>
  <div data-month="march">march</div>
  <div data-month="april">april</div>
  <div data-month="may">may</div>
  <div data-month="june">june</div>
</p>

＆＃13;

您想要更改＆＃34;选择＆＃34;的值下拉到您想要在当前选择之外选择的前几个月。

如何从当前开始选择第n个下一个数据元素？

3 个答案: