JQuery синтаксического анализа IMDB HTML

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: решение

$('.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 селектор:

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()); 
 
    } 
 
});

<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>

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, и фильтрует согласованный set, возвращая только элементы с nodeType == 3, которые являются текстовыми узлами.

Answer 3

Простой один, попробуйте следующее:

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

Update: чтобы удалить увидеть больше, используйте $(".see-more", $(this)).remove();