slideToggle - parent - next

**claudia_c82** · 06-05-2015, 11:39

Buongiorno a tutti, ancora una volta ho bisogno del vostro aiuto.....
faccio sempre un gran pasticcio con parent() e next()

devo fare una lista (senza ul) con delle informazioni e cliccando su "dettagli" si deve aprire il cassettino relativo....... finchè non ho div annidati, riesco abbastanza, ma con l'annidamento mi "annodo"

questo è il codice

codice HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
.row {
  border:1px solid red;
    margin: 10px;
}
#no-more-tables {
    display: none;
}
-->
</style>
</head>

<body>

<div id="farine" class="section-content">

    <div class="row">
        <div class="col-sm-12">
            <div class="farine-item">
                <div class="farine-thumb">
                    <p>testo</p>
                    <p><a href="javascript:;" class="largeButton moreBgColor">Dettagli</a></p>
                </div> <!-- /.farine-thumb -->
            </div> <!-- /.farine-item -->
        </div> <!-- /.col-sm-12 -->
    </div> <!-- /.row -->
    <div class="row">
        <div class="col-sm-12">
            <section id="no-more-tables" class="hidden">
                <table class="table-bordered table-striped table-condensed cf">
                  <thead class="cf">
                    <tr>
                      <th>TIPO FARINA</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td data-title="TIPO FARINA">FARINA &quot;00&quot;</td>
                    </tr>
                  </tbody>
                </table>
            </section>
        </div>
    </div> <!-- /.row -->


    <div class="row">
        <div class="col-sm-12">
            <div class="farine-item">
                <div class="farine-thumb">
                    <p>testo2 </p>
                    <p><a href="javascript:;" class="largeButton moreBgColor">Dettagli</a></p>
                </div> <!-- /.farine-thumb -->
            </div> <!-- /.farine-item -->
        </div> <!-- /.col-sm-12 -->
    </div> <!-- /.row -->
    <div class="row">
        <div class="col-sm-12">
            <section id="no-more-tables" class="hidden">
                <table class="table-bordered table-striped table-condensed cf">
                  <thead class="cf">
                    <tr>
                      <th>TIPO FARINA</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td data-title="TIPO FARINA">FARINA &quot;0&quot;</td>
                    </tr>
                  </tbody>
                </table>
            </section>
        </div>
    </div> <!-- /.row -->
    
</div> <!-- /#farine -->

    <script src="js/jquery-1.10.2.min.js"></script>
    <script>
$(document).ready(function () {

    $('a.moreBgColor').css("color", "red");

    $('a.moreBgColor').click(function() {
        $('.open').slideToggle( "slow" ).toggleClass('open');
        $(this).closest('farine-item').parent().parent().next('#no-more-tables').toggleClass('close').slideToggle("slow").css("color", "red");
    });

});
</script>

</body>
</html>

mi potreste aiutare?
grazie

Claudia

**KillerWorm** · 07-05-2015, 00:13

Ciao Claudia,

a parte parent() e next(), c'è anche qualche altro pasticcio qua e là.

Prima di tutto credo sia utile per te fare chiarezza sui metodi da te menzionati:

parent() in sostanza, seleziona il genitore diretto dell'oggetto a cui questo metodo è applicato. Chiaramente è possibile selezionare dei progenitori (nonno, bisnonno, ecc) applicando in serie tale metodo (come hai fatto nel tuo script), ma nel tuo caso questo sistema non è troppo elegante; può essere sostituito direttamente col metodo closest() (leggi sotto) che tra l'altro hai già usato nel tuo script anche se non sfruttandolo appieno;
next() seleziona il fratello seguente dell'elemento a cui è applicato. E' possibile inoltre specificare l'argomento per restringere ulteriormente la selezione;
closest() seleziona il primo progenitore, trovato secondo l'argomento indicato, dell'oggetto a cui tale metodo è applicato. Praticamente è simile al parent() ma esegue una ricerca risalendo, dall'oggetto iniziale, i vari livelli nell'albero del DOM, fino a trovare l'elemento specificato.

A mio parere, per ciò che hai chiesto, puoi usare sostanzialmente una combinazione tra closest() e next(). Cioè risalendo al progenitore ".row" e selezionando il fratello seguente.
A quel punto basterà cercare, con find(), all'interno di quell'elemento per selezionare l'elemento a cui applicare il toggle.

Detto questo, ci sono da chiarire alcune cose:

Il tuo codice HTML presenta degli id duplicati. Questo non è consentito in base agli standard dettati dal w3c. In poche parole gli id devono necessariamente essere univoci all'interno di una stessa pagina HTML. Per questo esistono le classi.

In riferimento al tuo codice, il "no-more-tables" non può essere quindi un id (perché è ripetuto su vari elementi) ma puoi usarlo come classe.

Un'altra piccola cosa, non è un errore ma un suggerimento, se devi applicare dei semplici stili agli elementi del tuo documento, è meglio usare direttamente il css piuttosto che passare attraverso JavaScript/jQuery.

In pratica, la riga di script $('a.moreBgColor').css("color", "red"); ha poco senso ed è uno spreco di risorse perché la stessa cosa puoi farla con una semplice dichiarazione direttamente nel css, .moreBgColor {color: red;}, a meno che non mi stia perdendo qualcosa per cui tu abbia volutamente usato jQuery (presumo di sì, visto il resto dello script in cui vai ad applicare altre cose simili, di cui però non riesco a seguirne la logica).

Un'ultima cosa, non capisco l'applicazione delle classi .open e .close, saranno sempre legate all'applicazione di qualche css? Presumo che manchi parte del codice, forse è per questo che non riesco a capirne appieno l'utilizzo.

Ad ogni modo, per concludere, ti posto il tuo codice che ho modificato opportunamente secondo quanto ti ho appena indicato (sfoltendolo anche dalle varie cose di cui non capisco lo scopo):

codice:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
.row {
  border:1px solid red;
  margin: 10px;
}
.moreBgColor {
  color: red;
}
.no-more-tables {
  display: none;
}
-->
</style>
</head>

<body>

<div id="farine" class="section-content">

    <div class="row">
        <div class="col-sm-12">
            <div class="farine-item">
                <div class="farine-thumb">
                    <p>testo</p>
                    <p><a href="javascript:;" class="largeButton moreBgColor">Dettagli</a></p>
                </div> <!-- /.farine-thumb -->
            </div> <!-- /.farine-item -->
        </div> <!-- /.col-sm-12 -->
    </div> <!-- /.row -->
    <div class="row">
        <div class="col-sm-12">
            <section class="no-more-tables">
                <table class="table-bordered table-striped table-condensed cf">
                  <thead class="cf">
                    <tr>
                      <th>TIPO FARINA</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td data-title="TIPO FARINA">FARINA &quot;00&quot;</td>
                    </tr>
                  </tbody>
                </table>
            </section>
        </div>
    </div> <!-- /.row -->

    <div class="row">
        <div class="col-sm-12">
            <div class="farine-item">
                <div class="farine-thumb">
                    <p>testo2 </p>
                    <p><a href="javascript:;" class="largeButton moreBgColor">Dettagli</a></p>
                </div> <!-- /.farine-thumb -->
            </div> <!-- /.farine-item -->
        </div> <!-- /.col-sm-12 -->
    </div> <!-- /.row -->
    <div class="row">
        <div class="col-sm-12">
            <section class="no-more-tables">
                <table class="table-bordered table-striped table-condensed cf">
                  <thead class="cf">
                    <tr>
                      <th>TIPO FARINA</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td data-title="TIPO FARINA">FARINA &quot;0&quot;</td>
                    </tr>
                  </tbody>
                </table>
            </section>
        </div>
    </div> <!-- /.row -->
    
</div> <!-- /#farine -->

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
$(document).ready(function () {

  $('a.moreBgColor').click(function() {
      $(this).closest(".row").next(".row").find(".no-more-tables").stop().slideToggle("slow");
  });

});
</script>

</body>
</html>

In particolare ho "convertito" no-more-tables in classe (anziché id).
A questa classe ho applicato display: none, dichiarato direttamente nel css.
Sui relativi tag ho eliminato la dichiarazione class="hidden". Presumo che ti servisse per nascondere tali elementi inizialmente, ma questo è gestito direttamente dallo slideToggle in jQuery.
Infine la riga jQuery in cui ho usato closest , next e find per selezionare l'elemento in questione e applicare lo slideToggle. Lo stop() serve per bloccare eventuali animazioni in corso ed eliminare la coda di animazione.

Fammi sapere se hai bisogno di maggiori chiarimenti.
Ciao.

Discussione: slideToggle - parent - next

Strumenti discussione

Ricerca discussione

Visualizza

slideToggle - parent - next

Permessi di invio