如何从多个重复元素中获取文本？答案

【问题标题】：how to get text from multiple repeated elements?如何从多个重复元素中获取文本？
【发布时间】：2015-06-03 09:37:05
【问题描述】：

我需要使用 jquery 从多个重复的 HTML 结构中检索媒体 div 上的点击事件的文本信息。

<div class="activity-list">
    <div class="media">
        <a class="pull-left" href="http://pbs.twimg.com/profile_images/592781386324549633/5QdIRp9T_normal.png">
            <img class="media-object" src="http://pbs.twimg.com/profile_images/592781386324549633/5QdIRp9T_normal.png" alt="">
        </a>
        <div class="media-body">
            <a target="_blank" class="pull-left" href="https://twitter.com/Ford Motor Company">
                <strong>Ford Motor Company  @Ford</strong>
            </a>
            <br>
            <small class="text-muted">06-02-2015 05:53 PM</small>
            <small data-original-title="Favorite" data-toggle="tooltip" class="text-muted favorite"><i class="glyphicon glyphicon-star"></i>0</small>
            <div class="fb_desc">
                "@Barsotta Happy 100,000 miles, Justin! Here's to your next milestone with your truck!"
            </div>
        </div>
    </div>
    <div class="media">
        <a class="pull-left" href="http://pbs.twimg.com/profile_images/592781386324549633/5QdIRp9T_normal.png">
            <img class="media-object" src="http://pbs.twimg.com/profile_images/592781386324549633/5QdIRp9T_normal.png" alt="">
        </a>
        <div class="media-body">
            <a target="_blank" class="pull-left" href="https://twitter.com/Ford Motor Company">
                <strong>Ford Motor Company  @Ford</strong>
            </a>
            <br>
            <small class="text-muted">06-02-2015 08:37 PM</small>
            <small data-original-title="Favorite" data-toggle="tooltip" class="text-muted favorite"><i class="glyphicon glyphicon-star"></i>22</small>
            <div class="fb_desc">
                "We teamed up with @jonathanadler to create the ultimate road trip u2014 driving directions here: http://t.co/UzE37As167 http://t.co/exDDFJmnGL" </div>
            <div class="ista_usr_img">
                <a data-rel="prettyPhoto" href="http://pbs.twimg.com/media/CGhAyeXUcAEJjA5.jpg">
                    <img alt="" class="thumbnail img-responsive" src="http://pbs.twimg.com/media/CGhAyeXUcAEJjA5.jpg">
                </a>
            </div>
        </div>
    </div>
</div>

我的 jquery 代码找到点击媒体：

$('.activity-list.media').click(function (e) {
        alert('media');
  });

但在点击媒体 div 时没有收到任何警报消息。

问题更新：

在 ajax 调用后，所有媒体 div 都设置在活动列表 div 上，因此给定的解决方案对我不起作用。

谢谢萨米克

【问题讨论】：

$('.activity-list .media') 在media 之间添加一个空格是activity-list 的子级

标签： jquery

【解决方案1】：

你的元素选择器错误，请试试这个：-

$('.activity-list .media').click(function (e) {
    alert('media');
 });

.activity-list.media 将选择具有 .ctivity-list 和 .media 两个类的元素，但 .activity-list .media 这将选择具有类 .media 的元素，该元素内部具有类 activity-list 的元素

希望这会有所帮助。

【讨论】：

.activity-list.media 是一个多类选择器，因此它会选择具有多个类的元素，即

【解决方案2】：

请看下面的代码，这里是怎么做的

$(document).ready(function() {
  $(".activity-list .media").click(function() {
    alert("media");

  })


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="activity-list">
  <div class="media">
    <a class="pull-left" href="http://pbs.twimg.com/profile_images/592781386324549633/5QdIRp9T_normal.png">
      <img class="media-object" src="http://pbs.twimg.com/profile_images/592781386324549633/5QdIRp9T_normal.png" alt="">
    </a>
    <div class="media-body">
      <a target="_blank" class="pull-left" href="https://twitter.com/Ford Motor Company">
        <strong>Ford Motor Company  @Ford</strong>
      </a>
      <br>
      <small class="text-muted">06-02-2015 05:53 PM</small>
      <small data-original-title="Favorite" data-toggle="tooltip" class="text-muted favorite"><i class="glyphicon glyphicon-star"></i>0</small>
      <div class="fb_desc">
        "@Barsotta Happy 100,000 miles, Justin! Here's to your next milestone with your truck!"
      </div>
    </div>
  </div>
  <div class="media">
    <a class="pull-left" href="http://pbs.twimg.com/profile_images/592781386324549633/5QdIRp9T_normal.png">
      <img class="media-object" src="http://pbs.twimg.com/profile_images/592781386324549633/5QdIRp9T_normal.png" alt="">
    </a>
    <div class="media-body">
      <a target="_blank" class="pull-left" href="https://twitter.com/Ford Motor Company">
        <strong>Ford Motor Company  @Ford</strong>
      </a>
      <br>
      <small class="text-muted">06-02-2015 08:37 PM</small>
      <small data-original-title="Favorite" data-toggle="tooltip" class="text-muted favorite"><i class="glyphicon glyphicon-star"></i>22</small>
      <div class="fb_desc">
        "We teamed up with @jonathanadler to create the ultimate road trip u2014 driving directions here: http://t.co/UzE37As167 http://t.co/exDDFJmnGL"</div>
      <div class="ista_usr_img">
        <a data-rel="prettyPhoto" href="http://pbs.twimg.com/media/CGhAyeXUcAEJjA5.jpg">
          <img alt="" class="thumbnail img-responsive" src="http://pbs.twimg.com/media/CGhAyeXUcAEJjA5.jpg">
        </a>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

点击事件在定义事件的那一点不存在。我需要使用现场或委托活动。

$(document).on('click', '.media', function () {
        alert('media');
    });

或

$('body').delegate('.media','click',function(){
     alert('media');
});

【讨论】：