jQuery 使用父子逐一单击锚标记

Question

我有一个 table 网格，其中包含一个简短描述以及一个包含文本 "read more".

的 HTML 锚标记

我想使用 jquery 逐一单击包含文本 "read more" 的锚标记。用于显示 table

中的其余文本

<div class="description_short col-sm-12 col-xs-12">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type a<a href="#" class="expand_text">... read more  </a></div>

<div class="description_short col-sm-12 col-xs-12">"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the gr<a href="#" class="expand_text">... read more  </a></div>

table 中有很多 div 个元素。如何单击 ... read more 锚标记并使用 jQuery 仅显示 div 文本？

如有任何帮助，我们将不胜感激。

Answer 1

$('.readmore').on('click',function() {
  $(this).parent().find('p').addClass('showText');
});

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.showText {
  max-width: inherit !important;
  overflow: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p><a class='readmore'>Read more</a></div>

<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p><a class='readmore'>Read more</a></div>

<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p><a class='readmore'>Read more</a></div>

<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p><a class='readmore'>Read more</a></div>

jQuery 使用父子逐一单击锚标记

jQuery click anchor tag one by one using parent child

anchor

jquery

click

parent-child