jQuery - Get Text after closing anchor tag

Question

I have a table like so:

<table border="1" width="40%">
   <tbody>
      <tr class="child-row123" style="display: table-row;">
         <td class="monsters">Monster</td>
         <td class="monsters">
            <a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
            <a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
            <a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
            <a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
         </td>
      </tr>
   </tbody>
</table>

I am currently using jquery get extract all the names from the data attributes. However, I also need to see how many times it's referenced (x3, x2 or x1) which are standalone text nodes.

Here is my loop:

jQuery(".child-row123 a[data-name]").each(function(){
    var dataname = jQuery(this).data('name');

    //Alert
    if(!jQuery.isNumeric(dataname)){
        alert(dataname);  
    }
});

Using jQuery, is it possible to get the data-name alongside the text node of x3, x2 or x1? I'm trying figure it out logically and I'm guessing I need to look at the end of each anchor tag?

score 2 · Answer 1 · answered Dec 20 '19 at 14:59

You can get the info with .nextSibling

jQuery(".child-row123 a[data-name]").each(function() {
  var name = this.getAttribute("data-name"), // as the name is a string we don't really need the magic from jQuerys .data()
      refs = this.nextSibling.textContent;

  console.log(name, refs);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
  <tbody>
    <tr class="child-row123" style="display: table-row;">
      <td class="monsters">Monster</td>
      <td class="monsters">
        <a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
        <a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
        <a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
        <a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
      </td>
    </tr>
  </tbody>
</table>

score 2 · Accepted Answer · answered Dec 20 '19 at 15:14

Try using the DOM function .nextSibling to pick the next node and use nodeValue to get the "referenced (x3, x2 or x1)"

Source: How to get text node after element?

jQuery(".child-row123 a[data-name]").each(function() {
  var dataname = jQuery(this).data('name');
  var nodetext = jQuery(this)[0].nextSibling.nodeValue;

  //Alert
  if (!jQuery.isNumeric(dataname)) {
    console.log("Data: " + dataname + "\nreferenced: " + nodetext);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
  <tbody>
    <tr class="child-row123" style="display: table-row;">
      <td class="monsters">Monster</td>
      <td class="monsters">
        <a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
        <a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
        <a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
        <a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
      </td>
    </tr>
  </tbody>
</table>

score 1 · Answer 3 · answered Dec 20 '19 at 15:05

What I would do and what you could do if possible. Is wrap your texts inside a span and then get the text with next(). With this solution, instead of having floating texts you have a more structured html.

$(".child-row123 a[data-name]").each(function() {
  var dataname = $(this).data('name');

  //Alert
  if (!$.isNumeric(dataname)) {
    console.log(dataname + " " + $(this).next().text());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
  <tbody>
    <tr class="child-row123" style="display: table-row;">
      <td class="monsters">Monster</td>
      <td class="monsters">
        <a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> <span>x3</span><br>
        <a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> <span>x2</span><br>
        <a data-name="Kuriboh" target="_blank">Kuriboh</a> <span>x1</span><br>
        <a data-name="Dark Magician" target="_blank">Dark Magician</a> <span>x3</span><br>
      </td>
    </tr>
  </tbody>
</table>

Good answer! I can't wrap the text though since I need to retroactively apply this to 9000+ tables across various wordpress posts that can't be updated. Unfortunately I need to work with how the current setup is. — GenesisBits, Dec 20 '19 at 15:43

jQuery - Get Text after closing anchor tag

3 Answers3