CODEWITHSUNDEEP
javascriptjquery
Daniel
Daniel

Reputation: 1466

how to check if the current value exist in a particular element with jQuery

I created a drop-down menu. I was trying to get the current li value using jQuery. Is there any way that we can get the current value of the current li or any other smarter way to do that.

My JS Fiddle Example: http://jsfiddle.net/o2gxgz9r/17/

Upvotes: 1

Views: 94

Answers (5)

nocturns2
nocturns2

Reputation: 661

Good point @Ying Yi, about removing spaces.

Then this should work by just adding the trim() as well:

$('.languageDropdown li').on('click', function(){
if( $(this).text().trim() === 'ENGLISH'){
    alert('you just clicked english');
}
else{
    alert('wrong value');
}

});

Upvotes: 1

Ryan
Ryan

Reputation: 14649

A simple way is to get the first child of the <li> element, then get the innerHTML of it. You can do this without changing much of your code: http://jsfiddle.net/ykbmatxw/

$('.languageDropdown li').on('click', function(){
    if($(this).children().get(0).innerHTML.trim() === 'ENGLISH'){
        alert('you just clicked english');
    }
    else{
        alert('wrong value');
    }
});

Upvotes: 0

Zay Lau
Zay Lau

Reputation: 1864

Like the other said, .text() returns lots of unnecessary white spaces (which should be some HTML tags), for example <li><a>123</a></li> will return {bunch of spaces}123{bunch of spaces} because the anchor tag a has been replaced by spaces, there would be no such kind of spaces if we use $("li a").text() instead since there is no HTML tag replacement occur.

However, I personally use .text() as value comparison rarely. The better practice would be using the data-* attr of elements, avoid missing the data- prefix if it is a make up attr to prevent confuse other programmer.

JsFiddle: http://jsfiddle.net/Zay_DEV/o2gxgz9r/19/

var AcceptedValues = ["english", "abc"],
    ListItems = $(".languageDropdown li").each(function(){
      var $this = $(this);
      $this.attr("data-value", $this.text().trim().toLowerCase()); // Bind their text to data-value
    }).on("click", function () {
      var $this = $(this),
          Value = $this.attr("data-value");

      if ($.inArray(Value, AcceptedValues) >= 0) // Search if the value inside the array
        alert("You just clicked '" + Value.toUpperCase() + "'");
      else alert("Wrong value");
    });
a{
  font-size:12px;
  color:#000;
  text-decoration:none;
}
li a{
  padding-left:20px;
}
li a:hover{
  color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<span class="language">
        <a href="#">
           ENG 
        </a>
        <i class="fa fa-caret-down" aria-hidden="true"></i>
      </span>
      <ul class="languageDropdown">
        <li>
          <a href="#">
            ABC
          </a>
        </li>
        <li>
          <a href="#">
            ENGLISH
          </a>
        </li>
        <li>
          <a href="#">
            SPANISH
          </a>
        </li>
        <li>
          <a href="#">
            ARABIC
          </a>
        </li>
        <li>
          <a href="#">
            TELUGU
          </a>
        </li>
      </ul>

Upvotes: 1

Ying Yi
Ying Yi

Reputation: 782

Need to remove spaces

$('.languageDropdown li').on('click', function(){

var reg = /^\s*|\s*$/g;  
alert("=="+$(this).text()+"==");
var text = $(this).text().replace(reg, "");


	if( text === 'ENGLISH'){
		alert('you just clicked english');
	}
	else{
		alert('wrong value');
	}
	
});
a{
  font-size:12px;
  color:#000;
  text-decoration:none;
}
li a{
  padding-left:20px;
}
li a:hover{
  color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="language">
        <a href="#">
           ENG 
        </a>
        <i class="fa fa-caret-down" aria-hidden="true"></i>
      </span>
      <ul class="languageDropdown">
        <li>
          <a href="#">
            ENGLISH
          </a>
        </li>
        <li>
          <a href="#">
            SPANISH
          </a>
        </li>
        <li>
          <a href="#">
            ARABIC
          </a>
        </li>
        <li>
          <a href="#">
            TELUGU
          </a>
        </li>
      </ul>

Upvotes: 1

Junsik Shim
Junsik Shim

Reputation: 11

.text() usually returns a bunch of whitespaces around the actual value, so it's better to compare them something like this.

if ($(this).text().trim() === 'ENGLISH')

Or, better yet, add an attribute to the tag itself, so you can identify the value even when the text is in other languages.

<li value="english">
  <a href="#">
      'ENGLISH' in some other language
  </a>
</li>

if ($(this).attr("value") === "english")

Upvotes: 1

Related Questions