单击按钮时滚动到没有 ID 的文本

Question

我有多行带有文字的文章，上面也有标题。 我正在寻找一个搜索 function 滚动到正确标题的搜索栏在单击按钮后已放入。 现在，此文本没有 class 或 ID atm，并且它也是从具有<b>Titel: ". $row['titel']. "</b>在这种情况下，它将是 "I am一个测试标题”例如。

我在按钮单击时尝试了这个（和其他多个）功能：

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

在这里找到

但是由于我的文本是从数据库中加载的，它不会重新识别它（我假设）。 当我尝试这个完全相同的 function 并在页面底部带有<p>I am a test title</p>时，它会滚动到其中的文本。

这个 function 也成功了，但是我想要一个滚动而不是红色边框，例如。

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

在这里找到

我已经被这个问题困扰了一段时间，无法找到任何解决方案。 非常感谢您在正确方向上的任何帮助。

我用来加载多篇文章的完整代码：

 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>";

      }
  }

}

Answer 1

我认为不可能滚动到文本（你应该放 Ids ），但如果你仍然想在没有 Id 的情况下这样做，你可以搜索你的词：

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

$([document.documentElement, document.body]).animate({
        scrollTop: elem.offset().top
    }, 2000);

Answer 2

我认为问题在于您的 js 在您的文档准备好之前运行。

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

您可以将您的代码放在准备好的文档 function 中，并且它仅在 DOM 加载时执行，相比之下，直接使用滚动事件。

您可以在以下位置了解更多信息： https://www.tutorialspoint.com/What-is-document-ready-method-in-jQuery