CODEWITHSUNDEEP
javascriptjqueryhtml
xendi
xendi

Reputation: 2522

Get text of specific element by index

I want to get the text of the second to last table row, so I tried to do this:

var tradeNumEl = $("td.trade-num").length - 2;
console.log($("td.trade-num")[tradeNumEl].text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="trade-num">100</td>
  </tr>
  <tr>
    <td class="trade-num">101</td>
  </tr>
  <tr>
    <td class="trade-num">102</td>
  </tr>
  <tr>
    <td class="trade-num">103</td>
  </tr>
  <tr>
    <td class="trade-num">104</td>
  </tr>
  <tr>
    <td class="trade-num">105</td>
  </tr>
</table>

However it gives me:

Uncaught TypeError: $(...)[tradeNumEl].text is not a function

How can I fix this? Here's the fiddle: https://jsfiddle.net/45a9sc6k/4/

Upvotes: 1

Views: 114

Answers (3)

Ullas Hunka
Ullas Hunka

Reputation: 2211

You also can create the object of the found element

///I want to get the text of the second to last table row using js and jquery. So I tried to do this:

var tradeNumEl = $("td.trade-num").length - 2;
console.log($($("td.trade-num")[tradeNumEl]).text(), tradeNumEl)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td class="trade-num">100</td>
</tr>
<tr>
  <td class="trade-num">101</td>
</tr>
<tr>
  <td class="trade-num">102</td>
</tr>
<tr>
  <td class="trade-num">103</td>
</tr>
<tr>
  <td class="trade-num">104</td>
</tr>
<tr>
  <td class="trade-num">105</td>
</tr>
</table>

Upvotes: 0

Kiran Shahi
Kiran Shahi

Reputation: 7980

You have to use eq() with index no as parameter. .eq(index) Reduce the set of matched elements to the one at the specified index.

var tradeNumEl = $("td.trade-num").length - 2;
console.log($("td.trade-num").eq(tradeNumEl).text() )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td class="trade-num">100</td>
</tr>
<tr>
  <td class="trade-num">101</td>
</tr>
<tr>
  <td class="trade-num">102</td>
</tr>
<tr>
  <td class="trade-num">103</td>
</tr>
<tr>
  <td class="trade-num">104</td>
</tr>
<tr>
  <td class="trade-num">105</td>
</tr>
</table>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Accessing a jQuery object by index returns the Element object at that index of the collection. It does not return a jQuery object - hence your error. To fix this, use eq() instead:

console.log($("td.trade-num").eq(tradeNumEl).text());


var tradeNumEl = $("td.trade-num").length - 2;
console.log($("td.trade-num").eq(tradeNumEl).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="trade-num">100</td>
  </tr>
  <tr>
    <td class="trade-num">101</td>
  </tr>
  <tr>
    <td class="trade-num">102</td>
  </tr>
  <tr>
    <td class="trade-num">103</td>
  </tr>
  <tr>
    <td class="trade-num">104</td>
  </tr>
  <tr>
    <td class="trade-num">105</td>
  </tr>
</table>

Upvotes: 1

Related Questions