Jquery - Schleife durch jedes div-Element mit einer bestimmten Klasse und eine neue Klasse je nach Breite

Ich habe Probleme mit einigen jquery und Frage mich, ob Sie helfen könnte.

Ich habe ein Menü mit einem dropdown und möchten, ändern Sie die position des dropdown-je nachdem, auf welcher Liste ein Element es ist, UND wie weit die drop-down ist, dies ist, was ich habe, so weit...

$(document).ready(function() {
var subnavWidth = $('.sub-nav-wrapper').width();

if(subnavWidth > 900) {
    $('.sub-nav-wrapper').addClass('two-column-offers');
} else if (subnavWidth > 800) {
    $('.sub-nav-wrapper').addClass('one-column-offers');
} else if(subnavWidth > 600) {
    $('.sub-nav-wrapper').addClass('offers');
} else if(subnavWidth > 500) {
    $('.sub-nav-wrapper').addClass('two-column');
} else if(subnavWidth > 300) {
    $('.sub-nav-wrapper').addClass('one-column');

}
});

aber berücksichtigt nur den ersten Eintrag in das Menü, und gilt die betreffende Klasse zu jedem der sub-Navigationen. Ich möchte es zu überprüfen Sie die Breite für jede sub-navigation nicht nur der erste und wenden Sie dann die Klasse, die bestimmte sub-nav.

Ich hoffe das macht Sinn.

InformationsquelleAutor tay | 2012-09-28
  1. 5
    $(function() {
    $('.sub-nav-wrapper').each(function(i,elem) {
        var width = $(this).width();
        if(width > 900) {
            $(elem).addClass('two-column-offers');
        } else if (width > 800) {
            $(elem).addClass('one-column-offers');
        } else if(width > 600) {
            $(elem).addClass('offers');
        } else if(width > 500) {
            $(elem).addClass('two-column');
        } else if(width > 300) {
            $(elem).addClass('one-column');
        }
    });
});​
    • e der Regel steht für eine event Objekt. Ich würde verwenden el statt, um Verwechslungen zu vermeiden.
    • Den jQuery docs tendieren nun dazu domEle in vielen Beispielen, um sicherzustellen, dass die Menschen es verstehen, so gibt es offensichtlich einige Verwirrung Los. Ich habe immer nur verwenden e, wie ich weiß, wenn ich Falle oder ein element, aber das ist nur für mich!
    • Danke für, die.
    • Ein problem, das ich habe ist, dass es mit der richtigen Klasse, aber in einigen Fällen es gilt das "Angebot" Klasse, wie gut, wissen Sie, warum dies sein könnte?
    InformationsquelleAutor adeneo
  2. 0

    Müssen Sie diese anwenden, um alle Menüpunkte, so dass Sie wollen, wählen Sie Sie alle mit each();

    $('.sub-nav-wrapper').each();

    Können Sie Ihren code für "jeder" mit einem anomonus Funktion.

    $('.sub-nav-wrapper').each(function() {
    //YOUR CODE HERE                                       
}); //End each

    Verwenden Sie die $(this) Schlüsselwort, um ausführen Ihre Schecks auf "jedes" item.

     $('.sub-nav-wrapper').each(function() {
    alert($(this).width()); //for example                                      
 }); //End each
    InformationsquelleAutor SpaceBeers
  3. 0
       $(document).ready(function() {
   $('.sub-nav-wrapper').each(function() {
       var subnavWidth = $(this).width();
   if(subnavWidth > 900) {
      $(this).addClass('two-column-offers');
   } else if (subnavWidth > 800) {
       $(this).addClass('one-column-offers');
   } else if(subnavWidth > 600) {
     $(this).addClass('offers');
   } else if(subnavWidth > 500) {
      $(this).addClass('two-column');
   } else if(subnavWidth > 300) {
      $(this).addClass('one-column');
   }
 });
 });
    InformationsquelleAutor Teena Thomas
Schreibe einen Kommentar