Nächstes wählen Sie die Option, die Filter übereinstimmt

Question

ich Problem habe versucht, die Dropdown-Liste Zyklus zur nächsten Option zu erhalten, die ein Datum abgeschlossen hat = false

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

Javascript:

$("#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); 
}); 

Siehe auch: http://jsfiddle.net/w9kcd/105/

ich habe es funktioniert, wenn filter = ""; aber nicht, wenn filter = "[data-completed!=true]";

Es sollte bei 1 beginnen und zu 4 und dann zu 5 gehen, wobei 2 und 3 übersprungen werden.

Answer 1

Die next Methode wählt nur das nächste unmittelbare Geschwisterelement aus. Wenn Sie einen Filter übergeben, wird nur das nächste unmittelbare Geschwister ausgewählt und nur dann, wenn es dem angegebenen Selektor entspricht. Es geht nicht, bis es ein passendes Element findet. Die alternative Methode ist nextAll, die dies tut, aber die nächsten Zielelemente sind keine Geschwister des Startelements. Sie könnten von der übergeordneten des ausgewählten Elements beginnen und dann den :has Selektor optgroup s für die Suche, die die erwarteten Kinder haben aber eine bessere/effizientere Option ist:

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 Sie eine Demo auf jsfiddle finden. Netz.