MJ
asked on
How to get first Set of Words Returned by jQuery
If there are two instances this returns
"Loan Applications
Loan Applications"
or
"Borrower
Borrower"
var welcome = $("a.c-nav__link.js-nav__link.align-item-center.c-nav__link--flex.active").text();
How do I get the first occurrence of the words? I tried welcome[0] but that only returns the first letter? Sometimes there is only one word but sometimes there are two words:"Loan Applications
Loan Applications"
or
"Borrower
Borrower"
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You could use the :first selector to get the first instance then the .split() method to get the first word.
The above code will work in the case of two instances :
Working Fiddle
Also for one instance like :
Working Fiddle
var first_word = $("a.class_x:first").text().split(' ')[0];
The above code will work in the case of two instances :
<a href="#" class="class_x">Loan Applications</a>
<a href="#" class="class_x">Loan Applications</a>
Working Fiddle
Also for one instance like :
<a href="#" class="class_x">Borrower</a>
<a href="#" class="class_x">Borrower</a>
Working Fiddle
Let us look at what is happening here.
In this case there is more than one element that matches the selector (class="fruit").
If we look at how the jQuery text() function works it iterates over all index properties in the object concatenates their text values together. So the output of the above will be
A better solution would be to leave the text() off and only use it when you need to in other words
<div class="fruit">banana</div>
<div class="fruit">orange</div>
<script>
$(function() {
var welcome = $('.fruit').text();
console.log(welcome);
});
</script>
jQuery functions return a jQuery object which is made up of various properties including index values for each instance of the selector found. In other words if there are two matching elements then the properties "0" and "1" will exist on the object containing node elements for each item found.In this case there is more than one element that matches the selector (class="fruit").
If we look at how the jQuery text() function works it iterates over all index properties in the object concatenates their text values together. So the output of the above will be
bananaorange
Which does not help us in terms of splitting the string unless you know exactly what you are going to be getting back - which is unlikely.A better solution would be to leave the text() off and only use it when you need to in other words
var welcome = $('.fruit');
Now you can access the node elements directly with an indexwelcome[0]
welcome[1]
However, you need to remember that the elements of the array are not jQuery objects but node elements so to access the text value you either need to wrap them in a jQuery object$(welcome[1]).text();
Or access the node properties directlywelcome[1].textContent;
ASKER
I haven't tested any solutions yet due to the holiday here but I wanted to make clear that I wanted "Loan Applications" and "Borrower" returned. I don't just want the first word returned but the first group of words returned, removing the duplicate.
Thanks~
Thanks~
Ok could you please post an example of the HTML structure that you have?
Refer to my solution above - you will get both groups of words exactly as required.
ASKER
Thank you all!
Open in new window
I have kept your variable word to keep it as close to your snippet as possible. Ideally, you could add .split(" ") after .text().