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

【问题标题】：Scroll to Text without ID on button click单击按钮时滚动到没有 ID 的文本
【发布时间】：2019-11-13 10:03:31
【问题描述】：

我有多行带有文字的文章，上面也有标题。我正在寻找一个滚动到正确标题的搜索功能，该功能在单击按钮后已放入搜索栏中。现在这个文本没有类或 ID atm，它也是从带有 <b>Titel: " . $row['titel'] . "</b> 的数据库中加载的，在这种情况下，它会是“我是一个测试标题”。

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

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

Found here

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

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

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

Found here

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

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

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

      }
  }

}

【问题讨论】：

如果您包含的代码在某些情况下有效，而在其他情况下无效，您应该在问题中包含其中一种失败的情况。 stackoverflow.com/help/minimal-reproducible-example 很有可能，问题是由于您没有向我们展示的东西，我们很难提供帮助。

标签： javascript jquery frontend scrolltop scrollto

【解决方案1】：

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

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

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

【讨论】：

因为我提到的第一个函数确实有效，但不能使用数据库中的文本，我想一定有办法做到这一点。
“来自数据库的文本”是什么意思，文本是在页面之后加载的？因为这实际上适用于从 Db 加载的内容。如果您现在在控制台中输入我的代码，您将滚动到顶部！和var elem = $('*:contains("I am a simple string")'); $([document.documentElement, document.body]).animate({ scrollTop: elem.offset().top }, 2000); 到底部

【解决方案2】：

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

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

您可以将代码放在文档就绪函数中，它仅在 DOM 加载时执行，相比之下，直接使用滚动事件。

您可以通过以下方式了解更多信息：https://www.tutorialspoint.com/What-is-document-ready-method-in-jQuery

【讨论】：