What is the ^= operator in jQuery?

Question

I have come across some JS/jQuery code and am trying to find out what the ^= operator means. I can't find anything like this when Googling it.

The HTML page contains a form with these input fields:

<input type="text" id="name" name="name[1]" value="" size="22"/>
<input type="text" id="name" name="name[2]" value="" size="22"/>
<input type="text" id="name" name="name[3]" value="" size="22"/>

The JS validates the form before sending it to the server. Can somebody explain to me how the jQuery selector that is used in the lines with val and each works (or point me to the documentation)?

jQuery("button#finish").click(function(e) {
  var error = false;
  e.preventDefault();
  if (jQuery("[name^=name]").val() != "" ) {
    jQuery("[name^=name]").each(function(){ 
      if (jQuery(this).val() == "") { jQuery(this).closest("tr").remove(); }
    }); 
    
    if ( ! error) { jQuery("#form_names").submit(); }
  }
  else { alert("Bitte mindestens eine Person zuoberst in das Formular eintragen."); }

  });

That's _not_ JavaScript or jQuery, it's an attribute selector — jonrsharpe, Oct 19 '21 at 19:55

score 1 · Accepted Answer · answered Oct 19 '21 at 19:56

The jQuery() function (and it's alias the $() function) take a CSS selector as an argument to determine which element(s) to operate on. The list of supported selectors is given in the jQuery API documentation.

Here, the selector [foo^="bar"] means:

[an] element whose "foo" attribute value begins exactly with the string "bar"

What is the ^= operator in jQuery?

1 Answers1