jQuery获取有关更改问题的div文本

Question

这是我的看法

<div class="product-sort-section flex-row flex-justify flex-center"><span></span>
          <div class="custom-select">

              <div class="select_cat select-title">Cортировать</div>
                <ul class="dropdown select-list">   
                   @foreach ($categories as $category)
                     <li>
                       <a class="dropdown-item" href="{{ route('front.category.ru', $category->slug) }}">{{ $category->name }}</a>
                     </li> 
                   @endforeach
                </ul>                      

          </div>            
        </div>        

当它用 jquery 改变时，我尝试获取 div 文本

<script>
    $(document).ready(function(){
       $('.select_cat').on("DOMSubtreeModified",function(){
         var cat = $(".select_cat").html();
         console.log(cat.trim());
      });

    });
</script>

当我尝试将 div 文本保留到浏览器日志时，我得到两个字符串，一个是空的，另一个是需要的类别名称，但有一些空间。如何在我的脚本中只获取 div 文本？谢谢你的回答。

Answer 1

使用text 方法代替html

<script>
    $(document).ready(function(){
       $('.select_cat').on("DOMSubtreeModified",function(){
         var cat = $(".select_cat").text();
         console.log(cat.trim());
      });

    });
</script>

不要使用JQueryhtml方法将文本添加到div中，而是使用plan javascript方法textContent。

使用计划javascript方法而不是JQueryhtml/text方法。

JQuery 会先清除 div 内容，然后添加新文本，这就是为什么 DOMSubtreeModified 事件会执行两次，一次在空节点上，另一次在实际内容上。

示例。

function changeContent() {
        let select_cat = document.querySelector('.select_cat');
        select_cat.textContent = 'New Content';
}