Nhận văn bản sau phần tử nhất định (JavaScript hoặc JQuery)

Question

Có thể một số người cung cấp cho tôi một số hướng dẫn về cách tốt nhất để làm điều này.

Tôi đang cố gắng để có được tất cả các văn bản đó là sau khi ".main"

Tôi biết điều này có thể là đơn giản, nhưng nó được chọn tại bộ não của tôi cả ngày ngay trước Giáng sinh. Vì vậy, tôi nghĩ thay vì nhấn mạnh bản thân mình ra, tôi sẽ tìm một số hướng dẫn.

Đoạn mã ví dụ chỉ mang lại Text in P tag nhưng tôi muốn mang lại Text not in it's own element và p tag

các

console.log($("#container").find(".main").next().text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="main"> WOOP IN MAIN </div> 
 
    Text not in it's own element 
 
    <p> Text in P tag </p> 
 
</div>

Answer 1

Đó là vì Text not in it's own element được coi là một text nút, do đó next() sẽ nhắm mục tiêu thẻ <p/>, là rằng nó là một HTMLElement. Nếu bạn đã đi tự nhiên bạn muốn sử dụng một sự kết hợp của nextSibling, đó là thuyết bất khả tri của hai loại nút và nextElementSibling, mà như nó tên phương pháp ngụ ý, lấy tiếp theo anh chị em yếu tố:

const main = document.querySelector('.main'); 
 

 
const txt = [ 
 
    main.nextSibling.textContent.trim(), 
 
    main.nextElementSibling.textContent.trim() 
 
]; 
 

 
console.log(txt)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="main"> WOOP IN MAIN </div> 
 
    Text not in it's own element 
 
    <p> Text in P tag </p> 
 
</div>

Answer 2

Cách đơn giản nhất để đạt được điều này là để clone() container, loại bỏ phần tử .main từ đó, sau đó lấy số text(), như sau:

var text = $("#container").clone().find('.main').remove().end().text(); 
 
console.log(text.trim());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="main"> WOOP IN MAIN </div> 
 
    Text not in it's own element 
 
    <p> Text in P tag </p> 
 
</div>

Hoặc bạn có thể đệ quy đi qua thông qua các nút DOM mà theo các yếu tố .main, nhưng điều này là phức tạp hơn nhiều và đưa ra kết quả tương tự.