Question

我遇到问题，试图让下拉列表循环到下一个有data-completed = false的选项

public ListResultOutput<T> GetCache<T>(string cacheKey) where T: IDto
{
    var cache = RedisConnectorHelper.Connection.GetDatabase();
    var values = JsonConvert.DeserializeObject<List<T>>(cache.StringGet(cacheKey));
    return values != null ? new ListResultOutput<T>(values.ToList().OrderBy(o=>o.Name)) : null;
}

使用Javascript：

<select id="selectionChamp">
<optgroup label="1">
  <option data-completed=true selected>Text 1</option>
</optgroup>
<optgroup label="2">
  <option data-completed=true>Text 2</option>
</optgroup>
<optgroup label="3">
  <option data-completed=true>Text 3</option>
</optgroup>
<optgroup label="45">
  <option data-completed=false>Text 4</option>
  <option data-completed=false>Text 5</option>
</optgroup>
</select>

<input type="button" id="fieldNext" value="Next">

请参阅：http://jsfiddle.net/w9kcd/105/

我在$("#fieldNext").click(function() { var $selected = $("option:selected"); var filter = "[data-completed!=true]"; $selected.attr("data-completed", true).prop("selected", false); var $next = $selected.next("option"+ filter); if ($next.length === 0) { $next = $selected.parent("optgroup").next("optgroup:has(option"+ filter+")").find("option"+ filter+":first"); } $next.prop("selected", true); });时使用它，但在filter = "";

时却没有

它应从1开始，然后转到4然后转到5，跳过2和3。

Answer 1

next方法只选择元素的下一个直接兄弟。如果您将过滤器传递给它，它将仅选择下一个直接同级，仅当它与指定的选择器匹配时。直到找到匹配的元素才会发生。替代方法是nextAll，它执行此操作，但下一个目标元素不是起始元素的兄弟。您可以从所选元素的父元素开始，然后使用:has选择器查找具有预期子元素的optgroup，但更好/更有效的选项是：

var $options = $("#selectionChamp option");

$("#fieldNext").click(function() {
    var $selected = $("option:selected").attr("data-completed", 'true');
    // get the index of the current selected element
    var i = $options.index($selected);  
    // find the first next matching element
    // you can also pass a string to the filter method: `[data-completed!="true"]`
    var $next = $options.slice(i /* + 1 */).filter(function() {
        return this.getAttribute('data-completed') !== "true"; 
    }).eq(0).prop("selected", true);
});

Here你可以在jsfiddle.net上找到一个演示。

接下来选择匹配过滤器的选项

1 个答案: