jquery .prev() lukt niet zoals ik wil

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pipo Clown

Pipo Clown

14/01/2015 16:13:17
Quote Anchor link
Onderstaand de relevante code :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function sub_up(veld)
{
    var id = veld.id.split('_')[1];
    var vorige = $('#subUp_13').closest(".div_sop").prevAll();
    alert(vorige.attr('id'));
}

</script>


<div id="sub_1" class="bmenu_sub" style="display: block;">
    <div id="tst_12" class="tst" style="float:left">
        <div class="div_sneer" >  B </div>
        <div id="subUp_12" class="div_sop">  </div>
    </div>
    Contact
    <br>
    <div id="tst_13" class="tst" style="float:left">
        <div class="div_sneer">  
        </div>
        <div id="subUp_13" class="div_sop" onclick="javascript:sub_up(this)">  A
        </div>
    </div>
    Beheer
    <br>
</div>


Nadat er op de DIV met ID="subUp_13" is geklikt, is het de bedoeling dat ik de id terug krijg van de div met class "div_sop" die er boven staat ( ID="subUp_12"). Op de één op andere vage manier krijg ik dit niet voor elkaar.

Wanneer ik al iets terug krijg bij mijn pogingen dan krijg ik de ID="subUp_13" terug en die wil ik nu net niet hebben.

Wie helpt mij uit de brand ?
Gewijzigd op 14/01/2015 17:36:28 door Pipo Clown
 
PHP hulp

PHP hulp

15/11/2019 15:54:01
 
Wouter J

Wouter J

14/01/2015 17:42:41
Quote Anchor link
Gebruik jQuery event handlers ipv inline. Op die manier kun je $('#subUp_13') buiten de event listener halen, waardoor die sneller wordt.

Wat je wilt is: huidige element -> vorige element -> child .div_sop. In jQuery: $(this).prev().find('.div_sop')

PS: Welkom terug ;)
 
Pipo Clown

Pipo Clown

14/01/2015 18:42:39
Quote Anchor link
Onderstaande ingevoerd :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
   var vorige = $('#subUp_13').prev().find('.div_sop');
   alert(vorige.attr('id'));


Dit geeft als resultaat een undefined in de alertbox.

Op dit moment heb ik '#subUp_13' nog hard ingevuld in javascript, dit moet straks de variabel "veld" worden welke ik als parameter mee krijg.

Op dit moment zijn er slecht 2 DIV's met de class 'div_sop' dit kunnen er straks 25 zijn en ik moet altijd de id terug hebben van de DIV met class 'div_sop' welke boven de aangeklikte DIV staat.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

14/01/2015 19:15:10
Quote Anchor link
Er staat een div boven de div, die wordt door prev() geselecteerd, zet er parent() tussen.
Je moet dan wel alle losse teksten tussen de divs uithalen, getest in IE en werkt daar niet.

In plaats van inline kan je ook .on gebruiken:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
    $('.div_sop').on("click", function(){
        var jqo = $(this);
        // alert(jqo.parent().prev('div').find('.div_sop').attr('id'));
        alert(jqo.parent().prevAll('div.tst').first().find('.div_sop').attr('id'));
    });
Gewijzigd op 14/01/2015 20:42:54 door Ger van Steenderen
 
Pipo Clown

Pipo Clown

14/01/2015 19:33:33
Quote Anchor link
Ik heb de code van Ger letterlijk in de document.ready functie geplakt en de onclick verwijdert uit de div.

Helaas nog steeds een undefined als resultaat in de alertbox.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

14/01/2015 19:36:58
Quote Anchor link
Dat had ik dus ook, maar in jouw html staat op regel 16 en regel 24 tekst buiten de divs, als je die er binnen zet werkt het wel.
 
Pipo Clown

Pipo Clown

14/01/2015 19:50:41
Quote Anchor link
Oke, je hebt gelijk wat het werken betreft, ik heb de tekst boven de </div? geplaatst op regel 15 en 28 maar dan ga ik de mist in met de opmaak.

Het is de bedoeling dat ik, per regel, een div_sneer, een div_sop en dan een tekst krijg.

In de DIV's sop en sneer staan een pijltje naar boven en een pijltje naar beneden. Wanneer daar op geklikt wordt moet de tekst die er achter staat een regel naar boven of naar beneden maar hij moet wel zijn oorspronkelijke database =ID behouden, het nummer dat ik in de ID gebruik, dus 12 of 13.

Ik heb geprobeerd om de tekst binnen een extra div te plaatsen (zonder class of ID) maar ook dit werkt niet
Het is dus relevant dat de tekst achter deze divs blijft staan.




Toevoeging op 14/01/2015 19:59:56:

Hier een afbeelding, dat maakt het misschien iets duidelijker voor het begrip.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

14/01/2015 20:47:48
Quote Anchor link
Ik heb de code in mijn eerdere post aangepast naar .prevAll('div.tst').first()

Maar is in dit geval werken met ul's en li's niet makkelijker?
 
Pipo Clown

Pipo Clown

14/01/2015 21:16:27
Quote Anchor link
Die ul en li's ga ik eventjes over nadenken, daar kom ik op terug

Kan ik div's gebruiken binnen een ul en/of li ?
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

14/01/2015 21:35:25
Quote Anchor link
Ik denk het niet maar je kan wel span's gebruiken met display:inline-block
 
Pipo Clown

Pipo Clown

15/01/2015 10:54:25
Quote Anchor link
Ik heb het maar even nagekeken maar DIV's binnen een LI mag.

Vooralsnog krijg ik het niet uitgelijnd oals ik wil.
Ik heb regels waar de pijltjes rechts staan (topitems) en regels waar de pijltjes links staan (subitems).

De subitems staan in een eigen div, deze verberg ik wanneer er geen subitems zijn.

ik gebruik binnen de LI's dus DIV's met float left en right om de onderdelen te positioneren aan de linker en rechterkant.

Links komt de plus/min bij een topitem wanneer er subitems zijn om deze subitems te tonen.

Zolang ik subitems heb gaat het goed.
Heb ik deze niet dan gaan de pijltjes aan de rechterkant per regel naar links verspringen.

Ik ga er van uit dat dit met een clear te maken heeft maar kan nog niet vinden waar in deze dan moet plaatsen om het goed te krijgen.

Ik wil eerst de uitlijning goed hebben voor ik weer verder ga met het prev() probleem omdat dit bepalen is voor de structuur.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.