僅使用段落文本的一部分加載div

我想通過使用Jquery .load函數爲我的主頁創建標題新聞提要。僅使用段落文本的一部分加載div

我正在加載頁面news.html，我可以定位第一個元素（最新的新聞報道）。

$("#headline").load("news.html .media-left:first, .media-body:first", function() { 

    $("#headline").append("<a class='pull-right' href='news.html'>...Read more</a>"); 

});

但我無法弄清楚是怎麼只有拿起股利和股利中的前兩段，這樣我可以創造一個更多按鈕，帶他們到主news.html ，每次我嘗試引用段落的一部分時，它只包含段落，並且不包括具有附加樣式的div media.body。

<div class="media menu-center"> 
    <div class="media-left"> 
     <div class="donut-yellow"> 
     <h4> 
      <span class="month">May</span> 
      <span class="day">23rd</span> 
     </h4> 
    </div> 
    </div> 
    <div class="media-body media-right "> 
     <p class="media-heading"><strong>e </strong></p> 
     <p>Welcome to the brand new ****!</p><p>To ensure that we continue to(...)</p> 
     <p>Take a look around the new layout and make sure to keep an eye on this(...)</p> 

     <span class="pull-right"><p class="bg-success"><strong>Paul</strong></p></span> 
    </div> 
</div>

來源

2015-05-08 paulkennethkent

您可能想要檢索整個文檔，然後從該對象中抓取所需的部分。 HTML以上是返回什麼，或整個文件？ – isherwood

有沒有什麼方法可以創建一個不同的news.html，其中已經生成了正確的html？它將只有最新的故事，每個的前兩個段落和正確的閱讀更多鏈接/樣式。將節省使用JS修剪它的麻煩並提高性能。 –

是的，這是一個返回的例子。 – paulkennethkent

這個選擇似乎工作：

$("#headline").load("news.html .media-body>p:nth-child(-n+2)", function() { 

    $("#headline").append("<a class='pull-right' href='news.html'>...Read more</a>"); 

});

我已經在這個Fiddle進行了測試。

它返回：

Ë

歡迎來到全新的****！

來源

2015-05-08 14:47:14 LinkinTED

啊，看起來不錯，但不幸的是，如果你有不止一個新聞項目，那麼它會導入每個新聞項目的前兩個段落。 – paulkennethkent

這就是爲什麼.media-body：首先被使用，也許我正在以錯誤的方式解決這個問題？ http://jsfiddle.net/e5y2xj2z/2/ – paulkennethkent

然後您應該使用它的父項來選擇第一個：'$（「.media：first-of-type .media-body> p：nth-child（ - n + 2）「）'，check [here]（http://jsfiddle.net/e5y2xj2z/3/） – LinkinTED

回答

相關問題