CODEWITHSUNDEEP
javascriptjqueryarraysindexof
George Smith
George Smith

Reputation: 505

jQuery - compare indexOF from an array

I would like to apologise in advance if my question is stupid, but I am very new to jQuery. What I am trying to achieve is to compare two variables. The first one will be getting its value from divs. The second one will be an array. I will be very grateful if someone can give me hints where my mistake is. Thank you in advance.

Best regards, George

var User  = $('.User').text();
var Lucky_Names = ["Florence", "Brenda", "Steven"];
console.log(Lucky_Names);

if(User.indexOf(Lucky_Names) >= 1){
  alert("Congratulations, we found a match.");
}
else{
  alert("We couldn't find a match.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="User">Mark Watts</div>
<div class="User">Wanda Hathaway</div>
<div class="User">Ann Bailes</div>
<div class="User">Hal Piccirillo</div>
<div class="User">Richard Branson</div>
<div class="User">Jeffery Robison</div>
<div class="User">Christina Hammons</div>
<div class="User">Helen Clarke</div>
<div class="User">Terra Herrera</div>
<div class="User">Steven Rhodes</div>
<br>
<div style="color:red">PS: All the names in this list were randomly generated.</div>

Upvotes: 0

Views: 1283

Answers (5)

guest271314
guest271314

Reputation: 1

You can use jQuery.grep to iterate .User elements, .some(), .indexOf() to filter .textContent of element.

var Lucky_Names = ["Florence", "Brenda", "Steven"];
var matches = $.grep($(".User"), function(user) {
  return Lucky_Names.some(function(prop) {
  return user.textContent.indexOf(prop) > -1
  });
});

if (matches.length) {
  // do stuff
  $.each(matches, function() {
    this.style.color = "green"
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="User">Mark Watts</div>
<div class="User">Wanda Hathaway</div>
<div class="User">Ann Bailes</div>
<div class="User">Hal Piccirillo</div>
<div class="User">Richard Branson</div>
<div class="User">Jeffery Robison</div>
<div class="User">Christina Hammons</div>
<div class="User">Helen Clarke</div>
<div class="User">Terra Herrera</div>
<div class="User">Steven Rhodes</div>
<br>
<div style="color:red">PS: All the names in this list were randomly generated.</div>

You can alternatively use .filter()

var Lucky_Names = ["Florence", "Brenda", "Steven"];
var matches = $(".User").filter(function(index, user) {
  return Lucky_Names.some(function(prop) {
  return user.textContent.indexOf(prop) > -1
  });
});

if (matches.length) {
  // do stuff
  matches.each(function() {
    this.style.color = "green"
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="User">Mark Watts</div>
<div class="User">Wanda Hathaway</div>
<div class="User">Ann Bailes</div>
<div class="User">Hal Piccirillo</div>
<div class="User">Richard Branson</div>
<div class="User">Jeffery Robison</div>
<div class="User">Christina Hammons</div>
<div class="User">Helen Clarke</div>
<div class="User">Terra Herrera</div>
<div class="User">Steven Rhodes</div>
<br>
<div style="color:red">PS: All the names in this list were randomly generated.</div>

Upvotes: 2

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

This could solve your problem + also alert which users were lucky. Since you are new to jQuery and also probably to Javascript, I'll try to explain what I've done.

  1. Declared the variables users, luckyNames and luckyUsers as a const (constant value, because it will never be reassigned) MDN Docs - const.

  2. Convert the results of $('.User') selector to an array by using Array.from(...) MDN Docs - Array.from

  3. I'm using a map function to create a new array with the results of applied action to each item inside the users array MDN Docs - map. Also check out MDN Docs - arrow functions to understand the user => {...}

  4. Afterwards I'm applying a filter function which will filter for me the lucky users. This happens inside the function, where I check if the the firstname (applied a splitting by whitespace here to get it) is inside my luckyNames array MDN Docs - filter.

  5. Finally I check if the length of my luckyUsers array (which contains only the filtered matches) is greater than 0.

  6. To alert everything nicely, I'm using the template literals which allow me to embed expressions MDN Docs - template literals.

  7. Inside the template literals I'm using a join(...) to display the matched names separated by a , and a whitespace MDN Docs - join.

  8. To see how join(...) is working, just change/add a name which is in the list.

const users = Array.from($('.User'));
const luckyNames = ["Florence", "Brenda", "Steven"];

const luckyUsers = users.map(user => {
  return user.innerHTML.replace(/<[^>]*>/, '');
}).filter(user => {
  return luckyNames.indexOf(user.split(' ')[0]) > -1;
});

if(luckyUsers.length > 0){
  alert(`Congratulations, we found a match: ${luckyUsers.join(', ')}`);
} else{
  alert("We couldn't find a match.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="User">Mark Watts</div>
<div class="User">Wanda Hathaway</div>
<div class="User">Ann Bailes</div>
<div class="User">Hal Piccirillo</div>
<div class="User">Richard Branson</div>
<div class="User">Jeffery Robison</div>
<div class="User">Christina Hammons</div>
<div class="User">Helen Clarke</div>
<div class="User">Terra Herrera</div>
<div class="User">Steven Rhodes</div>
<br>
<div style="color:red">PS: All the names in this list were randomly generated.</div>

Upvotes: 1

surajck
surajck

Reputation: 1175

$('.User').text() will return all the names concatenated in one string, like this:

"Mark WattsWanda HathawayAnn BailesHal PiccirilloRichard BransonJeffery RobisonChristina HammonsHelen ClarkeTerra HerreraSteven Rhodes"

To find if this string contains any name from Lucky_Names:

var User  = $('.User').text();
var Lucky_Names = ["Florence", "Brenda", "Steven"];
console.log(Lucky_Names);

var _foundFlag = false;
Lucky_Names.forEach( function (d) {
    if (User.indexOf(d) > -1) //Note that 0 is also a positive match
        _foundFlag = true;
})

if (_foundFlag) {
    alert("Congratulations, we found a match.");   
} else {
    alert("We couldn't find a match.");
}

Upvotes: 2

Aniket Sinha
Aniket Sinha

Reputation: 6031

You cannot use User.indexOf(Lucky_Names).

EDIT: Further, your User will be the input, whereas Lucky_Users contains 3 elements. You can alternatively use Lucky_Names.indexOf(User) > -1

I believe what you're trying to achieve is find User position in Lucky_Names

You need to provide index with Lucky_Names

var position=-1;
for(var i=0;i<Lucky_Names.length;i++) {
  if(Lucky_Names[i] === User) {
    position=i;
  }
}
console.log(position)

If User matches any of Lucky_Names, position will be it's index in Lucky_Names, otherwise it'll be -1.

Upvotes: 3

ibrahim mahrir
ibrahim mahrir

Reputation: 31682

You'll have to loop through each .User element using jQuery.each, and it will be easier to make the array a regex or creating one from it like this:

var Lucky_Names = ["Florence", "Brenda", "Steven"];

var regex = new RegExp(Lucky_Names.join('|')); // regex: /Florence|Brenda|Steven/ (must be escaped if there is special characters)

$('.User').each(function() {                   // for each .User element
  var text = $(this).text();                   // get the text
  if(regex.test(text)) {                       // check if the regex matchs
    $(this).addClass("highlight");
  }
});
.highlight {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="User">Mark Watts</div>
<div class="User">Wanda Hathaway</div>
<div class="User">Ann Bailes</div>
<div class="User">Hal Piccirillo</div>
<div class="User">Florence Branson</div>
<div class="User">Jeffery Robison</div>
<div class="User">Christina Hammons</div>
<div class="User">Helen Clarke</div>
<div class="User">Terra Herrera</div>
<div class="User">Steven Rhodes</div>
<br>
<div style="color:red">PS: All the names in this list were randomly generated.</div>

Upvotes: 2

Related Questions