CODEWITHSUNDEEP
javascriptjquery
Hong Van Vit
Hong Van Vit

Reputation: 2986

How to get string when click on text in javascript or jquery

I have a list string like below. 

<p>sub1/sub2/sub3</p>

How can we get sub1 if mouse clicks on sub1? For example:

How can I do that?

Upvotes: 0

Views: 532

Answers (4)

Mamun
Mamun

Reputation: 68933

One way you can surround each text with span element:

$('p').html($('p').text().split('/').map(el => '<span>'+el+'</span>').join('/'));
$('span').click(function(i){
  var j = $(this).index();
  var t;
  if(j > 0){
    t = $('span:lt('+j+')').map(function(_,s){
      return $(s).text();
    }).get().join('/');
    t = t+'/'+$(this).text();
  }
  else t = $(this).text();
  console.log(t)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>sub1/sub2/sub3</p>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337713

All thing load from database, I can't put it in to a span

In this case split the text by / in to an array, then wrap each element in the array in a span and append it back to the DOM. Then you can add the delegated event handler to get the text of the current element and all previous siblings. Try this:

$('p')
  .html((i, h) => h.split('/').map(w => `<span>${w}</span>`).join('/'))
  .on('click', 'span', function() {
    var text = $(this).prevAll().addBack().map((i,e) => e.textContent).get().join('/');
    console.log(text);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>sub1/sub2/sub3</p>
<p>sub4/sub5/sub6</p>

On IE it does not work

This is because I used ES6 arrow functions, which IE doesn't support because it's incredibly outdated. If you need IE support change those to anonymous functions:

$('p')
  .html(function(i, h) {
    return h.split('/').map(w => `<span>${w}</span>`).join('/');
  })
  .on('click', 'span', function() {
    var text = $(this).prevAll().addBack().map(function() {
      return this.textContent;
    }).get().join('/');
    console.log(text);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>sub1/sub2/sub3</p>
<p>sub4/sub5/sub6</p>

Upvotes: 4

arm
arm

Reputation: 145

Here is a solution using only javascript with your main paragraph having an id of subs:

const subs = document.querySelector('#subs');

subs.innerHTML = subs.textContent.split('/').map(function (text, i) {
    return `<span data-nr="${i + 1}">${text}</span>`;
}).join('/');

subs.addEventListener('click', function (evt) {
    const spans = Array.prototype.slice.call(subs.querySelectorAll('span'));
    const texts = spans.filter(function (span) {
        return span.dataset.nr <= evt.target.dataset.nr;
    })
    .map(function (span) { return span.textContent; }) ;

    console.log(texts.join('/'));
});

Upvotes: 0

bgazsi
bgazsi

Reputation: 141

You should use a markup like <span data-sub="1">sub1</span>/<span data-sub="2">sub2</span>/<span data-sub="3">sub3</span>, so you will know which part of the text was clicked.

$('[data-sub]').on('click', function (event) {
  const currentNumber = $(event.currentTarget).data('sub');
  let texts = [];
  $('[data-sub]').each(function (index, element) {
    if ($(event.currentTarget).data('sub') <= currentNumber) {
      texts.push($(element).text());
    }
  });
  return texts.join('/');
});

Upvotes: 0

Related Questions