J'ai plusieurs lignes avec des artikels de texte qui ont également un titre au-dessus. Je recherche une fonction de recherche qui fait défiler les titres corrects dans la barre de recherche après un clic sur le bouton. Maintenant, ce texte n'a pas de classe ou d'ID atm et il est également chargé à partir d'une base de données avec <b>Titel: " . $row['titel'] . "</b> Dans ce cas, ce serait "Je suis un titre de test" par exemple.

J'ai essayé cette fonction (et plusieurs autres) sur le bouton:

$(window).scrollTop($("*:contains('I am a test title'):last").offset().top);

Trouvé ici

Mais comme mon texte est chargé à partir d'une base de données, il ne le regocnise pas (je suppose). Lorsque j'essaie exactement la même fonction avec un <p>I am a test title</p> en bas de la page, il fait défiler jusqu'au texte à l'intérieur.

Cette fonction a également réussi, mais au lieu de la bordure rouge, je voudrais un défilement par exemple.

$('*:contains("I am a test title")').each(function(){
 if($(this).children().length < 1) 
      $(this).css("border","solid 2px red") });

Trouvé ici

Je suis coincé avec ce problème depuis un certain temps et je n'ai pas pu trouver de solutions. Toute aide dans la bonne direction est très appréciée.

Mon code complet que j'utilise pour charger dans plusieurs articles:

 if ($res = mysqli_query($link, $sql)) {
  if (mysqli_num_rows($res) > 0) {
      if ($_SESSION['login_user'] == true) {

          echo "<table class='tableArtikel'>";
          while ($row = mysqli_fetch_array($res)) {

              $artikelRow = $row['artikel'];
              $rowArtikelId = $row['Artikel_id'];
              $rowTitel = $row['titel'];
              $rowTag = $row['tag'];
              echo "<form method='POST'>
          <input type='hidden' name='id' value='" . $rowArtikelId . "'>
          <div  class='container'>
          <th style='font-size: 1vw; font-family: sans-serif;     border-bottom: 1px solid #8f8f8f; padding-bottom: 23px;     padding-top: 23px;' class='" . $row['tag'] . "'><div><b style='font-size:20px;'>Titel: " . $row['titel'] . "</b></div><br> <i>Tags: " . $row['tag'] . " </i><br> Geupload door: " . $row["username"] . " <br> Laatst bewerkt: " . $row['edit_date'] . " door: " . $row['lastedit'] . "  <br><br>
                 <textarea name='content' id='summernote' class='summernote' style='margin-bottom: 5px;' >" . $artikelRow . "</textarea>
                <input type=\"submit\" name=\"submit\" value=\"Submit\" class='defaultButton'>
                </form>
                <button data-id='" . $rowArtikelId . "' id=\"myBtn$rowArtikelId\" class='openModal defaultButton'>Edit</button>
                <form method='POST'>
                   <input type='hidden' name='id' value='" . $rowArtikelId . "'>
                   <input type='submit' value='Delete' name='deleteArt' data-id='" . $rowArtikelId . "' id=\"myBtn$rowArtikelId\" class='deleteArt defaultButton'>
                </form>

               <!-- overlay   -->     
                <div id=\"myModal$rowArtikelId\" class=\"modal\">
                  <div class=\"modal-content\">                     
                    <span data-id='" . $rowArtikelId . "' class=\"close\">&times;</span>
                    <form method='POST'>
                    <br><input type='hidden' name='id' value='$rowArtikelId' >
                    <p>Titel</p>
                    <input value='$rowTitel' name='updateTitel' class=\"defaultInput\" style='color:black'><br>
                    <br><p>Tag</p>
                    <input value='$rowTag' id='updateTag' name='updateTag' class=\"defaultInput\" style='color:black'>
                    <input type='submit' name='submitPopUp' id='submitPopUp' class=\"defaultButton\" value='submit'>
                    </form>
                  </div>                 
             </div>    
             <!-- overlay -->      

          </th> 

          <tr>
             <th>

            </th>
          </tr>

          </div>";

          }
          echo "</table>";
          echo "</div>";

      }
  }

}

0
Rory 13 nov. 2019 à 13:03

2 réponses

Je pense qu'il n'est pas possible de faire défiler vers un texte (vous devez mettre les ID), mais si vous voulez toujours le faire sans Id, vous pouvez rechercher votre terme avec:

var elem =   $('*:contains("I am a simple string")');

$([document.documentElement, document.body]).animate({
        scrollTop: elem.offset().top
    }, 2000);
0
Ggs 13 nov. 2019 à 10:17

Je pense que le problème est que votre js s'exécute avant que votre document ne soit prêt.

$(document).ready(function() {
    $(window).scroll(function() {
        // do something
    });
});

Vous pouvez placer votre code dans la fonction de document prêt et il ne s'exécute que lorsque le DOM a été chargé, contrairement à l'utilisation directe de l'événement de défilement.

Vous pouvez en savoir plus sur: https://www.tutorialspoint.com/What-is-document-ready-method-in-jQuery

0
Amanjot Kaur 13 nov. 2019 à 13:01