[jQuery] Zoek elementen ná ander element

[StephanVierkant]

Ik zoek een manier waarop ik bij elementen kan aanpassen (hide, disable, etc.) na een actie op een ander element. Ik dacht dat nextAll() een oplossing zou zijn, maar het probleem is dat deze wel children vindt, maar niet echt zoek naar dieper liggende elementen. Een alternatief is gebruik maken van parent() en find(), maar dan wordt het element en voorgaande elementen ook worden beïnvloed.

Ik heb hier een JSFiddle staan: http://jsfiddle.net/svierkant/AKhTL/1/. De bedoeling is dat een click op een button alle volgende buttons (binnen de div) disabled, maar dat de huidige (en voorgaande) button niet worden beïnvloed.

Heeft iemand een idee hoe ik dit varkentje kan wassen?

[orf]

Omdat je de buttons in nodes (<p>) hebt zitten, zoek je de nextAll van de parents en daarbinnen de buttons:

JavaScript:

$(this).parent().nextAll('p').find('button')

Of zonder selector:

JavaScript:

$(this).parent().nextAll().find('button')

[ Voor 19% gewijzigd door orf op 17-02-2014 20:14 ]

[storeman]

JavaScript:

jQuery("button").on('click', function ()
{
    var el = $(this);
    
    while (el.prop('tagName') != 'DIV') {
        el.nextAll('button').prop('disabled', true);
        el.nextAll().find('button').prop('disabled', true);
        
        el = el.parent();
    }
});

Leuk puzzeltje, maar niet heel ingewikkeld, zou ik zo zeggen.

[StephanVierkant]

orf schreef op maandag 17 februari 2014 @ 20:12:
Omdat je de buttons in nodes (<p>) hebt zitten, zoek je de nextAll van de parents en daarbinnen de buttons:

JavaScript:

$(this).parent().nextAll('p').find('button')

Of zonder selector:

JavaScript:

$(this).parent().nextAll().find('button')

Dank, dit was de oplossing . Het was me even niet duidelijk dat je find() echt duidelijk moet specificeren. Mijn JSFiddle was iets simpelere, uiteindelijk moest ik meerdere find()'s gebruiken.

[C0rnelis]

Je hoeft sowieso geen meerdere finds te gebruiken, je kunt lijkt me, in één keer alle buttons opvragen met 1 find en vervolgens uitzoeken of je die moet disablen of niet ?

Dit misschien wat meer verbose dan bijvoorbeeld de oplossing van storeman, maar verschilt niet heel erg.

JavaScript:

$('button').click(function() {
    var that = this;
    var fromIndex = null;
    
    $(this)
        .closest('.step')
        .find('button')
        .filter(function(index, element) {
            if(fromIndex !== null && index > fromIndex) {
                return true;
            } else if(fromIndex === null && element == that) {
                fromIndex = index;
                return false;
            }
        })
        .prop('disabled', true);
});

De enige voorwaarde hierbij is dat je alle buttons onder één element met de class step wilt uitschakelen (maar die class kan je overal aan koppelen) en je bent ook niet gebonden aan de restrictie dat de buttons binnen p-elementen moeten staan. http://jsfiddle.net/AKhTL/4/