sélectionnez l'option suivante qui correspond à filtre

Question

J'ai problème en essayant d'obtenir le menu déroulant pour passer à l'option suivante qui a une données terminée = 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); 
}); 

Voir: http://jsfiddle.net/w9kcd/105/

Je l'ai fonctionne quand filter = ""; mais pas quand filter = "[data-completed!=true]";

Il devrait commencer à 1 et passer à 4 puis 5, en sautant 2 et 3.

Answer 1

La méthode next sélectionne simplement le prochain frère de l'élément. Si vous lui passez un filtre, il sélectionnera le prochain frère immédiatement, seulement et seulement s'il correspond au sélecteur spécifié. Il ne va pas jusqu'à ce qu'il trouve un élément correspondant. La méthode alternative est nextAll qui le fait mais les éléments cibles suivants ne sont pas des frères et soeurs de l'élément de départ. Vous pourriez commencer par le parent de l'élément sélectionné, puis utiliser le sélecteur :has pour trouver optgroup s qui ont les enfants attendus, mais une option mieux/plus efficace est:

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 vous pouvez trouver une démo sur jsFiddle. net.