Question

我想只访问艺术家的名字，在这种情况下是“Guns N Roses”。我已经有了解决方案：http://jsfiddle.net/QRBgp/4/

但我感兴趣的是有没有更短的方法呢？更好的方法？我知道有人会说“如果它有效，你为什么要问”，但我很好奇。

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

Answer 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()

Answer 2

我很好奇你为什么不简单地将名字包裹在<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();

Answer 3

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

jQuery从最深的元素最佳实践中获取文本

3 个答案: