javascript - 仅显示 html 中第一个逗号之前的内容

Question

我有以下 html 实例:

<span class="booking-detail"><b>12 hours, 12 hours, 12 hours</b></span>

除了内容是“ session 室、 session 室、 session 室”等之外，还有其他相同标记的实例。

我基本上只想显示“12 小时”和“ session 室”等，并在第一个逗号后隐藏所有内容。我是否通过用跨度包装第一个逗号及其后的所有内容来实现此目的，然后隐藏或替换 html 内容并不重要。

谢谢

Answer 1

循环元素，用逗号分隔文本，然后将其添加回元素。

$('.booking-detail b').each( function() {
  var text = $(this).html(); /* get the text */
  var textParts = text.split(','); /* split on the comma */
  $(this).html(textParts[0]); /* insert first array part */
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="booking-detail"><b>12 hours, 12 hours, 12 hours</b></span><br />
<span class="booking-detail"><b>14 hours, 12 hours, 12 hours</b></span><br />
<span class="booking-detail"><b>15 hours, 12 hours, 12 hours</b></span>

对于动态内容(基于评论)

$('.booking-detail').each( function() {
  var b = $(this).find('b');
  var text = b.html(); /* get the text */
  var textParts = text.split(','); /* split on the comma */
  b.html(textParts[0]); /* insert first array part */
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="booking-detail"><b>12 hours, 12 hours, 12 hours</b></span><br />
<span class="booking-detail"><b>14 hours, 12 hours, 12 hours</b></span><br />
<span class="booking-detail"><b>15 hours, 12 hours, 12 hours</b></span>

没有 .each 的替代方案

$('.booking-detail b').html( function(i,text) {
  return(text.split(',').splice(0,1));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="booking-detail"><b>12 hours, 12 hours, 12 hours</b></span><br />
<span class="booking-detail"><b>14 hours, 12 hours, 12 hours</b></span><br />
<span class="booking-detail"><b>15 hours, 12 hours, 12 hours</b></span>