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

I have an HTML structure like so:

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

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

But then there is a lot of HTML structure around the divs.

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

Now, I know how to select a data month, e.g.: $('[data-month=february]) gets the jQuery object with the div with the data-month of february.

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

Now, imagine that I currently have selected this february div like above, is there a way to get the nth neighbour of 'february' (the div n-positions to the right)?

现在,想象一下我目前已经选择了上面这个二月div,有没有办法让'nbruary'的第n个邻居(右边的div-position)?

I tried using the eq() function, but this cannot start from a current object. (I really need to start from a specific data-month and don't know the index upfront.)

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

3 个解决方案

#1

Simple! use .next() twice like so:

简单!像这样使用.next()两次:

$("[data-month='february']").next().next()

more info here

更多信息在这里

A more general approach is to use index() to find the current item's index, add an offset to that and then use parent().children().eq() like so:

更通用的方法是使用index()来查找当前项的索引,向其添加偏移量,然后使用parent()。children()。eq(),如下所示:

var current = $("[data-month='february']");
var other = current.parent().children().eq(current.index() + offset);

#2

Updated

Try utilizing .siblings() , filter , index

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

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

<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>

#3

I created an interactive demo for utilizing nth-child xengravity.com/demo/nth-child/.

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

Using nth-child I created the following snippet that should work for your situation:

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

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

<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>

You want to change the value of the "select" drop down to how many months forward you want to select beyond the current selection.

您希望将“选择”下拉值的值更改为要在当前选择之外选择的前几个月。

#1