Get value using jquery index number
I have the following codes of codes, all three DIVs have the same class name, what I am trying to do is get / get the second DIV value using jquery index index, the second DIV value is 3.21, I tried to use this code to retrieve div.OddVal.index(2)
Was I no luck guys where am i wrong?
<div class="ThreeWayCol OddsCol1">
<div class="OddVal ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" ng-repeat="sel in event._matchMarket.selections" ng-model="sel" ng-class="{'Sel': oddSelections[event.id].sels[sel.id]}" ng-click="selectOdd(event,event._matchMarket,sel)">3.37</div>
<div class="OddVal ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" ng-repeat="sel in event._matchMarket.selections" ng-model="sel" ng-class="{'Sel': oddSelections[event.id].sels[sel.id]}" ng-click="selectOdd(event,event._matchMarket,sel)">3.21</div>
<div class="OddVal ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" ng-repeat="sel in event._matchMarket.selections" ng-model="sel" ng-class="{'Sel': oddSelections[event.id].sels[sel.id]}" ng-click="selectOdd(event,event._matchMarket,sel)">2.07</div>
</div>
source to share
You tagged the question with jQuery , so I believe you are looking for.eq()
Reduce the set of matched items to one at the specified index.
console.log($('.OddVal').eq(1).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OddVal ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" ng-repeat="sel in event._matchMarket.selections" ng-model="sel" ng-class="{'Sel': oddSelections[event.id].sels[sel.id]}" ng-click="selectOdd(event,event._matchMarket,sel)">3.37</div>
<div class="OddVal ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" ng-repeat="sel in event._matchMarket.selections" ng-model="sel" ng-class="{'Sel': oddSelections[event.id].sels[sel.id]}" ng-click="selectOdd(event,event._matchMarket,sel)">3.21</div>
<div class="OddVal ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" ng-repeat="sel in event._matchMarket.selections" ng-model="sel" ng-class="{'Sel': oddSelections[event.id].sels[sel.id]}" ng-click="selectOdd(event,event._matchMarket,sel)">2.07</div>
source to share
The other answers explain multiple ways eq
, so I won't add this. I used selector n:th
and each
loop
$(".OddVal").each(function(index) {
if (index === 1) {
console.log("Each loop result " + $(this).text());
}
});
console.log("nth slector result " + $(".OddVal:nth-child(2)").text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ThreeWayCol OddsCol1">
<div class="OddVal ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" ng-repeat="sel in event._matchMarket.selections" ng-model="sel" ng-class="{'Sel': oddSelections[event.id].sels[sel.id]}" ng-click="selectOdd(event,event._matchMarket,sel)">3.37</div>
<div class="OddVal ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" ng-repeat="sel in event._matchMarket.selections" ng-model="sel" ng-class="{'Sel': oddSelections[event.id].sels[sel.id]}" ng-click="selectOdd(event,event._matchMarket,sel)">3.21</div>
<div class="OddVal ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" ng-repeat="sel in event._matchMarket.selections" ng-model="sel" ng-class="{'Sel': oddSelections[event.id].sels[sel.id]}" ng-click="selectOdd(event,event._matchMarket,sel)">2.07</div>
</div>
source to share
Use jquery method eq()
to get the specified index value as
var val = $('.OddVal').eq(your_index_no_here).text();// must be numeric as 1,2,3
alert(val);
You can get the JQuery eq () documentation
source to share
You can see a working example here:
Demo here: https://jsbin.com/rubapoz/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function() {
var index = $("#txtIndex").val();
alert($('.ThreeWayCol .OddVal').eq(index).text());
});
});
</script>
</head>
<body>
<div class="ThreeWayCol OddsCol1">
<div class="OddVal ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" ng-repeat="sel in event._matchMarket.selections" ng-model="sel" ng-class="{'Sel': oddSelections[event.id].sels[sel.id]}" ng-click="selectOdd(event,event._matchMarket,sel)">3.37</div>
<div class="OddVal ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" ng-repeat="sel in event._matchMarket.selections" ng-model="sel" ng-class="{'Sel': oddSelections[event.id].sels[sel.id]}" ng-click="selectOdd(event,event._matchMarket,sel)">3.21</div>
<div class="OddVal ng-pristine ng-untouched ng-valid ng-binding ng-scope ng-not-empty" ng-repeat="sel in event._matchMarket.selections" ng-model="sel" ng-class="{'Sel': oddSelections[event.id].sels[sel.id]}" ng-click="selectOdd(event,event._matchMarket,sel)">2.07</div>
</div>
<hr />
<input type="text" placeholder="Enter index like: 0,1" id="txtIndex" />
<input type="button" value="Get Value" id="btn" />
</body>
</html>
source to share
You can use https://api.jquery.com/get/
The .get () method provides access to the DOM nodes underlying every jQuery object. If the index value is out of range - less than a negative number of elements or equal to or greater than the number of elements, it returns undefined. Consider a simple unordered list:
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
</ul>
With the specified index .get (index) retrieves one element:
console.log( $( "li" ).get( 0 ) );
Since the index is zero-based, the first element of the list is returned:
<li id="foo">
source to share