Question

我有这样的HTML：

<div class="txt-block">
  <h4 class="inline">Country:</h4>
  <a href="/country/us?ref_=tt_dt_dt" itemprop='url'>USA</a>
</div>

<div class="txt-block">
  <h4 class="inline">Language:</h4>
  <a href="/language/en?ref_=tt_dt_dt" itemprop='url'>English</a>
</div>

<div class="txt-block">
  <h4 class="inline">Release Date:</h4> 9 January 2011 (USA)
  <span class="see-more inline">
    <a href="releaseinfo?ref_=tt_dt_dt" itemprop='url'>See more</a>&nbsp;&raquo;
  </span>
</div>

我需要获得键值。例如：'Release Date:'，'9 January 2011 (USA)'

我可以得到钥匙：

$('.txt-block').each(function() {
  console.log($(this).children('h4').text());
});

如何在这个循环中获取价值？

upd：solution

$('.txt-block').each(function() {                                                                                                    
    var key=$(this).children('h4').text();                                                                                             
    $(this).children('h4').remove();                                                                                                   
    $(this).children('span').remove();                                                                                                 
    var value=$(this).text().trim();                                                                                                   
    console.log(key,value);
}

Answer 1

您可以使用contains选择器：

＆＃13;

var container = $('h4:contains("Release Date")').parent(),
    seeMore = container.find('.see-more');

seeMore.detach();
console.log(container.text());

//if you need both as seperate values:
var splitValues = container.text().split(': ');
console.log(splitValues[0]);
console.log(splitValues[1]);

//using your each
$('.txt-block').each(function() {
  var block = $(this);
  if (block.find('h4:contains("Release Date")').length > 0) {
    block.find('.see-more').detach()
    console.log(block.text());
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="txt-block">
  <h4 class="inline">Country:</h4>
  <a href="/country/us?ref_=tt_dt_dt" itemprop='url'>USA</a>
</div>

<div class="txt-block">
  <h4 class="inline">Language:</h4>
  <a href="/language/en?ref_=tt_dt_dt" itemprop='url'>English</a>
</div>

<div class="txt-block">
  <h4 class="inline">Release Date:</h4> 9 January 2011 (USA)
  <span class="see-more inline">
    <a href="releaseinfo?ref_=tt_dt_dt" itemprop='url'>See more</a>&nbsp;&raquo;
  </span>
</div>

＆＃13;

Answer 2

$('.txt-block').each(function() {
    console.log($(this).children('h4').text());
    // value
    console.log($(this).first().contents().filter(function() {
        return this.nodeType == 3;
    }).text()));
});

这将获取所选div的内容，并过滤匹配的集合，仅返回nodeType == 3的元素，这些元素是文本节点。

Answer 3

一个简单的，试试这个：

$('.txt-block').each(function() {
    console.log($(this).children('h4').text());
    // strip all html
    console.log(this.textContent || this.innerText);
});

更新：要删除详情，请使用$(".see-more", $(this)).remove();

jQuery解析imdb html

3 个答案: