Question

在我的HTML页面数据中，下面给出了span标签： -

<span>1 this is a span one.</span>
<span>2 this is a span two.</span>
<span>3 this is a span three.</span>

输出

1 this is a span one.
2 this is a span two.
3 this is a span three.

如何在不删除1,2,3值的情况下隐藏它们，并在单击每个范围时使用JQuery提醒它们。

我想要的输出

this is a span one.
this is a span two.
this is a span three.

并在点击方式提醒他们如果首先点击则会提醒1如果是第二个然后是两个，如果是第三个然后3.谢谢

Answer 1

看看这个：

＆＃13;

$('span').each(function(){
    var firstLetter = $(this).text().substr(0,1);
    $(this).html('<i style="display:none">'+$(this).text().substr(0)+'</i>'+$(this).text().substr(1));
    $(this).on('click', function(){
        alert(firstLetter)
    })

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span>1 this is a span one.</span>
<span>2 this is a span two.</span>
<span>3 this is a span three.</span>

＆＃13;

https://jsfiddle.net/0h1cjxu4/6/

Answer 2

要实现这一目标，您可以使用另一个span来包装HTML中的前导号码，您可以在点击外部span时找到该号码：

$('span').html(function(i, h) {
  return h.replace(/^(\d+)/, '<span class="hidden">$1</span>');
}).click(function() {
  var number = $(this).find('.hidden').text();
  console.log(number);
});

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>1 this is a span one.</span>
<span>2 this is a span two.</span>
<span>3 this is a span three.</span>

或者，如果数字总是递增的，那么您只需删除它们并显示所点击的span的索引：

$('span').html(function(i, h) {
  return h.replace(/^\d+/, '');
}).click(function() {
  var index = $(this).index() + 1;
  console.log(index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>1 this is a span one.</span>
  <span>2 this is a span two.</span>
  <span>3 this is a span three.</span>
</div>

Answer 3

请注意，您不需要 jQuery。

您可以使用原生JavaScript执行以下操作：

使用.forEach()循环浏览您的span元素
使用新的span元素和新的class="hidden"来隐藏第一个字母，

请参阅代码段：

＆＃13;

var spans = document.querySelectorAll('span');
spans.forEach(function(span, index) {
  var firstLetter = span.textContent.substr(0, 1);
  span.innerHTML = span.innerHTML.replace(firstLetter, '<span class="hidden">' + firstLetter + '</span>');
  span.onclick = function() {
    console.log("You clicked span", firstLetter);
  }
});

console.log('Our "span one" HTML:\n', spans[0].innerHTML);

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<span>1 this is span one.</span>
<span>2 this is span two.</span>
<span>3 this is span three.</span>

＆＃13;

⋅ ⋅ ⋅

然后，您必须要使用数字＆gt; 9：

＆＃13;

var spans = document.querySelectorAll('span');
spans.forEach(function(span, index) {
  span.innerHTML = span.innerHTML.replace(/^(\d+)/, '<span class="hidden">$1</span>');
  span.onclick = function() {
    console.log("You clicked span", span.querySelector('.hidden').textContent);
  }
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<span>10 this is a span ten.</span>
<span>42 this is a span forty-two.</span>
<span>144 this is a span one-hundred-forty-four.</span>

＆＃13;

希望它有所帮助。

Answer 4

您可以通过以下HTML和CSS执行此操作。需要将跨度更改为div或p标记。

div.abc::first-letter {
  visibility: hidden;
}

<div class="abc">ABCB1</div>
<div class="abc">ABCB2</div>
<div class="abc">ABCB3</div>

Answer 5

使用

查找所有span个节点

const spans = container.find('span');

然后迭代每个范围并将新的字符串值添加到result变量中。

＆＃13;

const container = $('#container');
const spans = container.find('span');
let result = '';

spans.each(function( index ) {
 const text = $(this).text();
 const displayText = text.substring(1);
   result += displayText + "\n";
});

console.log(result)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <span>1 this is a span one.</span>
  <span>2 this is a span two.</span>
  <span>3 this is a span three.</span>
</div>

＆＃13;

Answer 6

试试这个：

  <script>
       $("span").each(function() {
  $(this).text($(this).text().replace(/[1234567890]/, ""));
});
    </script>

如何隐藏跨度的第一个字母？

6 个答案: