2013-08-22 55 views
0

我只想访问艺术家的名字,在这种情况下,“枪炮玫瑰”。我已经有一个解决方案:http://jsfiddle.net/QRBgp/4/jQuery从最深的元素最佳实践中获取文本

但我感兴趣的是有没有更简单的方法呢?更好的方法?我知道有人会说“如果有效,你为什么问”,但我很好奇。

HTML:

<div id="now_playing" class="tab ui-tabs-panel ui-widget-content ui-corner-bottom"> 
<div class="banner"> … </div> 
<div class="banner_wrap banner_top_left"></div> 
<div class="banner_wrap banner_bottom_left"></div> 
<div class="banner_wrap banner_top_right"></div> 
<div class="banner_wrap banner_bottom_right"></div> 
<div class="play-cont"> 
    <div class="curr-song-block clearfix"> 
     <div class="thumb"> … </div> 
     <div class="descr"> 
      <em> … </em> 
      <h3> … </h3> 
      <div class="data-block"> 
       <div class="data"> 
        <strong> by </strong> 
    Guns N Roses 
</div> 
       <div class="data"> 
        <strong> on </strong> 
    Appetite for Destruction 
</div> 
       </div> 
      </div><p> … </p> 
     </div> 
    </div> 
    <div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist"> … </div> 
</div> 

的jQuery我用:

$(".data-block").click(function() { 
alert($('#now_playing').find('.descr').find('.data-block').find('.data:first-child').clone().children("strong").remove().end().text()); 
}); 
+0

您可能要张贴这http://codereview.stackexchange.com/ – Smeegs

+0

[选择jQuery中最深的孩子](http://stackoverflow.com/questions/3787924/select-deepest-child-in-jquery) - 这是一个类似的问题。希望能帮助到你。 – ksalk

回答

1

你可以使用:

alert($('#now_playing .data:first').text().replace(/\s+by\s+/,'')); 
//or: 
alert($.trim($('#now_playing .data:first').contents()[2].textContent)); 

如果你想更短,虽然,它会更容易,如果你只是使用了元素你的文本节点 - 这将使这项工作更容易。如$("#now_playing .artist_name").text()

+0

我解析这个从我不拥有的网站,这就是为什么我不能“重构”的HTML;)谢谢你,我喜欢你的方法。 –

1

我很好奇为什么你不会简单地将这个名字包装在<span />中并给它一个类名。然后你可以按课程选择它。这使得您的标记和代码:a)更易于理解,b)更快,因为您不必为了删除一个单词而使用clone()任何东西。

HTML

<div class="data"> 
    <strong>by</strong> <span class="artist">Guns n' Roses</span> 
</div> 

jQuery的

#('#now-playing .descr .data:first-child').find('.artist').text(); 
+0

我从我没有的网站解析这个,这就是为什么我不能“重构”HTML;) –

1
$(".data-block").click(function() { 
alert($(this).('.data:first-child').clone().children("strong").remove().end().text());});