jQuery :contains Selector if else statement

Question

I have a results page that show users how they scored on a webform. I'm trying to display different messages based on their answer.

I've set up a basic alert to show what the user has selected.

var q1 = $('#webform-component-fieldset-1--question-1').text();
alert(q1);

if ($('#webform-component-fieldset-1--question-1:contains("A. Yes")')) {
    $('.results-wrapper').hide();
    $('.results').append('<div class="popup">User Selected A. Yes, for the first answer.</div>');
}
else if ($('#webform-component-fieldset-1--question-1:contains("B. No")')) {
    $('.results-wrapper').hide();
    $('.results').append('<div class="popup">User Selected B. No, for the first answer.</div>');
}
else if ($('#webform-component-fieldset-1--question-1:contains("C. I do not know")')) {
   $('.results-wrapper').hide();
   $('.results').append('<div class="popup">User Selected C. I do not know, for the first answer.</div>');  
}
else {
   alert('something went wrong');
}

http://jsfiddle.net/Hr6Lj/10/

Why are you using selectors this way? Couldn't you fetch `$('#webform-component-fieldset-1--question-1')` and then test it's contents via `html()`? — Jason Sperske, Mar 20 '13 at 17:33
@JasonSperske Why would you test the string contents of the element instead of just testing if the element exists? that seems like a much more involved way of doing it when he can just add `.length` to his current code. — Kevin B, Mar 20 '13 at 17:34
@KevinB, I guess it feels like an overuse of Sizzle of me, maybe it is a reasonable use, I've posted my approach — Jason Sperske, Mar 20 '13 at 17:40
@JasonSperske It's definitely more complex that it needs to be, i would have probably fixed it farther up the chain, keeping the answers in an object rather than the html. — Kevin B, Mar 20 '13 at 17:41
@j08691 the problem is that the first if statement is fired when it isn't supposed to be. — Nick Rivers, Mar 20 '13 at 18:11

Jason Sperske · Answer 1 · 2013-03-20T17:46:52.230

This is how I would do it (using jQuery's data() funciton) (demo)

<div class="results">
    <div class="results-wrapper">
        <div class="form-item webform-component webform-component-display" id="webform-component-fieldset-1--question-1"
        data-answer="C">C. I do not know</div>
    </div>
</div>

<script>
  var updateAnswer = function (question) {
    var answer = question.data('answer');
    if (answer === 'A') {
      $('.results-wrapper').hide();
      $('.results').append('<div class="popup">User Selected A. Yes, for the first answer.</div>');
    } else if (answer === 'B') {
      $('.results-wrapper').hide();
      $('.results').append('<div class="popup">User Selected B. No, for the first answer.</div>');
    } else if (answer === 'C') {
      $('.results-wrapper').hide();
      $('.results').append('<div class="popup">User Selected C. I do not know, for the first answer.</div>');
    } else {
      alert('something went wrong');
    }
  }
  updateAnswer($('#webform-component-fieldset-1--question-1'));
</script>

Made it (slightly) more general – Jason Sperske Mar 20 '13 at 17:47 — Jason Sperske, Mar 20 '13 at 17:47

score 0 · Accepted Answer · answered Mar 20 '13 at 17:32

The following will always be true because objects are always true.

if ($('#webform-component-fieldset-1--question-1:contains("A. Yes")'))

What you want is to know if any elements are selected.

if ($('#webform-component-fieldset-1--question-1:contains("A. Yes")').length)

jQuery :contains Selector if else statement

2 Answers2