Question

I wan to get the content within the < p > tag using jQuery. So I can have a Java variable with each players name. The jquery code sets playerN1 as a blank string instead of the players name. I was wondering why the text() was not grabbing the players name (whats within the < p > tags)?

<!-- HTML -->
<div class="match1">
  <div id="m1.p1" class="col3 first last bracket_player1">
    <p class="name">Player1 Name</p>
  </div>
  <div id="m1.p2" class="col3 first last bracket_player2">
    <p class="name">Player2 Name</p></div>
  </div>
</div>
<div class="match2">
  <div id="m2.p1" class="col3 first last bracket_player1">
    <p class="name">Player1 Name</p>
  </div>
  <div id="m2.p2" class="col3 first last bracket_player2">
    <p class="name">Player2 Name</p></div>
  </div>
</div>

 

// The jQuery
for (i = 0; i < 7; i++)
{
   var match = "m" + i;
   var elementID = "#"+match+".p1 "+"p";
   var playerN1 = $(elementID).text();
   console.log(elementID);
   console.log(playerN1);
}

Answer 1

It’s because of the . in the ID. #m1.p1 is interpreted as ID=m1 AND class=p1. You need to either escape the . (with 2 \s).

var elementID = "#"+match+"\\.p1 "+"p";

Or use the [id=""] selector.

var elementID = "[id='"+match+".p1'] "+"p";