代码之家 › 专栏 › 技术社区 › S S

获取子节点的内容

jquery javascript

S S · 技术社区 · 6 年前

<div id="results">
    <div class="ui list">
        <div class="item">
            <div class="content">
                <a class="header" onclick=" toMaker(event, 967)">Mahachai Holding</a>
                <div class="description">Lat Phrao, Bangkok, 10230</div>
            </div>
        </div>
    </div>
</div>

我使用了以下代码

$('#results > .ui.list')[0].childNodes[0].childNodes[1].innerHTML

把绳子弄得像

"<a class="header" onclick=" toMaker(event, 967)">MahachaiHolding</a><div class="description">Lat Phrao, Bangkok, 10230</div>"

但现在我对如何获取标题名和描述名感到困惑?

4 回复 | 直到 6 年前

void 6 年前

你需要找到 .html() .header 和 .description

const $content = $("#results .ui.list .item .content");
console.log($content.find(".header").html());
console.log($content.find(".description").html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
  <div class="ui list">
    <div class="item">
      <div class="content">
        <a class="header" onclick=" toMaker(event, 967)">Mahachai Holding</a>
        <div class="description">Lat Phrao, Bangkok, 10230</div>
      </div>
    </div>
  </div>
</div>

Budyn 6 年前

$('#results > .ui.list')[0].childNodes[0].childNodes[1].innerHTML

$('#results > .ui.list').find('.header') //will get you header element
$('#results > .ui.list').find('.description') //will get you description element

https://api.jquery.com/find/

参考url

SwapNeil 6 年前

试试这个。。。

输出将只给出元素的文本,而不是内部html

/// Get the header text 
console.log($('#results .ui.list a.header').text());

/// Get the description text 
console.log($('#results .ui.list div.description').text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="results">
  <div class="ui list">
    <div class="item">
      <div class="content">
        <a class="header" onclick=" toMaker(event, 967)">Mahachai Holding</a>
        <div class="description">Lat Phrao, Bangkok, 10230</div>
      </div>
    </div>
  </div>
</div>

Pradeep Saini 6 年前

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        console.log($(".content").text())
    });
    </script>
    </head>
    <body>

    <div id="results">
        <div class="ui list">
            <div class="item">
                <div class="content">
                    <a class="header" onclick=" toMaker(event, 967)">Mahachai Holding</a>
                    <div class="description">Lat Phrao, Bangkok, 10230</div>
                </div>
            </div>
        </div>
    </div>

    </body>
    </html>