Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] jQuery: current index

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] jQuery: current index

    Hallo, ich versuche derzeit den aktuellen Index eines Elements heraus zu finden, um diesen dann mit :eq(index) wieder benutzen zu können.
    Ich habe einige Klassen, die ich alle so ähnlich anspreche:
    Code:
    $('.someClass').bind('click', function(){
        /*So an dieser Stelle müsste ich nun herausfinden welchen Index das aktuelle Element hat*/
    });
    Gibt es einen Funktion oder einen Selektor, mit der ich den aktuellen Index bekomme? Leider hab ich auf der Entwicklerseite nichts gefunden, und wende mich voller verzweiflung an euch.

    Ich habe einen ähnlichen Aufbau:
    Code:
    <div class="boxOuter">
          <div class="someClass">...</div>
          <div class="someClassDetail">...</div>
         <div class="someClass">...</div>
        <div class="someClassDetail">...</div>
        <div class="someClass">...</div>
        <div class="someClassDetail">...</div>
    </div>
    Und würde gerne mit dem aktuellen Index der klasse someClass auf die Klasse someClassDetail zugreifen und dabei den selben Index benutzen.
    "My software never has bugs, it just develops random features."
    "Real programmers don't comment. If it was hard to write, it should be hard to understand!"


  • #2
    Das geht viel einfacher über die Ermittlung des nächsten Siblings. Ich glaube mit next().

    [edit]
    Fast. Schau Dir mal http://api.jquery.com/nextUntil/ an.
    --

    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


    --

    Kommentar


    • #3
      Uh stimmt siblings gabs da auch noch danke, werde ich direkt mal ausprobieren!
      "My software never has bugs, it just develops random features."
      "Real programmers don't comment. If it was hard to write, it should be hard to understand!"

      Kommentar


      • #4
        Siehe edit.
        --

        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


        --

        Kommentar


        • #5
          Code:
           $(document).ready(function(){
                          $('.someClass').click( function(){
                              alert($('.someClass').index(this));
                          });
                      });
          MFG
          apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

          Kommentar


          • #6
            Super vielen Dank. .nextUntil kann ich leider nicht benutzen, aber mit next hats funktioniert!
            Und das mit dem .index geht glaube ich auch nicht so gut, da ich den Index von someClass brauche innherhalb der Box und nicht von den Index von allen. Aber mit next geht das schon.
            Jetzt muss ich nur noch den Content per Ajax reinladen und meine universelle Sliderklasse ist fertig xD
            "My software never has bugs, it just develops random features."
            "Real programmers don't comment. If it was hard to write, it should be hard to understand!"

            Kommentar


            • #7
              nein dieser index liefert dir die nummer des DIVs mit dem class "someClass" alle anderen DIVs werden nicht in den index mit reingenommen.
              apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

              Kommentar


              • #8
                Sicher? Habe das auch ausprobiert gehabt, und hatte irgendwas merkwürdiger zurückbekommen. naja vielleicht habe ich mich auch vertippt gehabt. naja ich probiers nochmal aus.
                Danke nochmal für die prompte Hilfe
                "My software never has bugs, it just develops random features."
                "Real programmers don't comment. If it was hard to write, it should be hard to understand!"

                Kommentar


                • #9
                  also ich hatte zum testen folgenden code:

                  Code:
                  <html>
                  <head></head>
                  
                  <body>
                  <script type="text/javascript" href="jquery.js"></script>
                  <script type="text/javascript">
                   $(document).ready(function(){
                                  $('.someClass').click( function(){
                                      alert($('.someClass').index(this));
                                  });
                              });
                  </script>
                  <div class="boxOuter">
                        <div class="someClass">some Class 1</div>
                        <div class="someClassDetail">...</div>
                       <div class="someClass">some Class 2</div>
                      <div class="someClassDetail">...</div>
                      <div class="someClass">some Class 3</div>
                      <div class="someClassDetail">...</div>
                  </div>
                  </body>
                  </html>
                  und beim klicken auf some Class habe ich immer eine zahl von 0 bis 2 bekommen, je nachdem was ich angeklickt habe
                  apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

                  Kommentar


                  • #10
                    next() ist halt ein DOM-Zugriff weniger, von dem her würde ich bei next() bleiben. Evtl. in der diviteritis das template a la
                    Code:
                    <div id="containerid">
                        <div class="sel">
                            <div class="dosth"></div>
                            <div class="text"></div>
                        </div>
                        <div class="sel">
                            <div class="dosth"></div>
                             <div class="text"></div>
                         </div>
                    </div>
                    aufbauen. Macht auch beim event binden kein Problem. Auch sehr hübsch wäre ein namespace für dein click event.
                    I like cooking my family and my pets.
                    Use commas. Don't be a psycho.
                    Blog - CoverflowJS

                    Kommentar


                    • #11
                      Oder bspw.

                      Code:
                      <div class="boxOuter">
                      
                        <div class="someClass">
                          ...
                          <p class="someClassDetail">...</p>
                        </div>
                      
                        <div class="someClass">
                          ...
                          <p class="someClassDetail">...</p>
                        </div>
                      
                      </div>
                      --

                      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                      Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                      --

                      Kommentar


                      • #12
                        Vielen Dank für die guten Vorschläge, habe es jetzt mit next() gelöst. Falls es jemanden interessiert, was ich mir da gebaut habe, poste ich mal meine relevanten Code.
                        Kann jeder ders mag natürlich verwenden. Und an Verbesserungsvorschlägen wäre ich selbstverständlich auch interessiert.

                        slider.js
                        Code:
                        /*
                         * Slider - jQuery plugin 1.0
                         *
                         * Copyright (c) 2010 Paul Schramenko
                         *
                         */
                        
                        ;(function($) {
                            $.fn.extend({
                                slider: function(options) {
                                    var defaults = {
                                        'head' : '.psSliderHead',
                                        'content' : '.psSliderContent',
                                        'sliderTime' : 1000,
                                        'alwaysReload' : false,
                                        'ajax' : false
                                    };
                                    var settings = $.extend({}, defaults, options, {'calledItem' : '#' + $(this).attr('id')});
                                    new $.PsSlider(this, settings);
                                }
                            });
                        
                            $.PsSlider = function(item, settings) {
                                sliderInit();
                                $(settings.calledItem + ' > ' + settings.head).bind('click', function(){
                                    if ($(this).next().is(':hidden')) {
                                        slideUpAndDown($(this).next());
                                    }
                                });
                        
                                function sliderInit() {
                                    $(settings.content).each(function(){
                                        $(this).css('display', 'none');
                                    });
                                    slideUpAndDown($(settings.content + ':eq(0)'));
                                }
                        
                                function slideUpAndDown(item) {
                                    if (settings.ajax) {
                                        if (item.html() == '' || !settings.alwaysReload) {
                                            loadAjaxContent(item);
                                        } else {
                                            slideIt(item);
                                        }
                                    } else {
                                        slideIt(item);
                                    }
                                }
                        
                                function loadAjaxContent(item) {
                                    jQuery.ajax({
                                        type : "GET",
                                        url : item.prev().find('a').attr('href'),
                                        success : function(data) {
                                            item.html(data);
                                            slideIt(item);
                                        }
                                    });
                                }
                        
                                function slideIt(item) {
                                    $(settings.calledItem + ' > ' + settings.content).not(':hidden').slideUp(settings.sliderTime);
                                    item.slideDown(settings.sliderTime);
                                }
                            };
                        })(jQuery);
                        Dann der Code im HTML ohne Ajax
                        Code:
                        <div id="psSliderBox" class="ajax-content-box">
                            <div class="psSliderHead">head #1</div>
                            <div class="psSliderContent ajax-content">my content #1</div>
                            <div class="psSliderHead">head #2</div>
                            <div class="psSliderContent ajax-content">my content #2</div>
                        </div>
                        und mit Ajax
                        Code:
                        <div id="psSliderBox" class="ajax-content-box">
                            <div class="psSliderHead">
                                <a href="/load/withAjax"></a>
                                head #1
                            </div>
                            <div class="psSliderContent ajax-content"></div>
                            <div class="psSliderHead">head #2</div>
                            <div class="psSliderContent ajax-content">my content #2</div> <!-- no reload -->
                        </div>
                        der Aufruf erfolgt dann über
                        Code:
                        <script type="text/javascript" src="/path/to/slider.js"></script>
                        <script type="text/javascript">
                            $(document).ready(function(){
                                $('#psSliderBox').slider();
                            });
                        </script>
                        Damit kann man auch mehrere Solcher konstrukte auf einer Seite darstellen und diese werden korrekt auf und zu geklappt.
                        Was haltet ihr davon? Oder gibts da was besseres Fertiges? Hatte nichts gefunden...
                        "My software never has bugs, it just develops random features."
                        "Real programmers don't comment. If it was hard to write, it should be hard to understand!"

                        Kommentar


                        • #13
                          Ich hab mir son Teil aus dem Grund gebastelt, weil ich es auf zwei Seiten gebraucht habe, und keine Lust hatte auf redundanten Code, daher dachte ich mir, mach eine Datei mit der ich da immer verwenden kann...
                          "My software never has bugs, it just develops random features."
                          "Real programmers don't comment. If it was hard to write, it should be hard to understand!"

                          Kommentar


                          • #14
                            meinst du sowas?? nur mit ajax

                            Easy Slider jQuery Plugin Demo
                            apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

                            Kommentar


                            • #15
                              nee eigentlich nicht.
                              Bei mir sieht das ganze immo so aus, layout ist natürlich absolute Geschmackssache:

                              Naja ich müsste noch den Pfeil austauschen, aber so solls dann aussehen. Wenn ich dann auf einen anderen Menüpunkt klicke, geht der aktuelle zu und der geklickte geht auf
                              "My software never has bugs, it just develops random features."
                              "Real programmers don't comment. If it was hard to write, it should be hard to understand!"

                              Kommentar

                              Lädt...
                              X