How to add wildcard to CSS selectors?

Question

I am working on a website and I am trying to figure out how to add a wildcard to the following code for author1_name:

$(function() {
  var num = 2;
  var id = 'author' + num;
  var uni_id = 'university' + num;
  $("#AuthorFieldButton").click(function() {
    var name = 'Author ' + num;
    var uni_name = 'University ' + num;
    id = 'author' + num;
    $('.author-group').last().after('<div class="form-group"> <label class="col-md-4 control-label" for="' + id + '">' + name + ':</label><div class="col-md-4"><input type="text" id="' + id + '" name="' + id + '" class="form-control input-md" maxlength="40" ></div></div><div class="form-group author-remove-group author-group"><label class="col-md-4 control-label" for="' + uni_id + '">' + uni_name + ':</label><div class="col-md-4"><input type="text" id="' + uni_id + '" name="' + uni_id + '" class="form-control input-md" maxlength="55" ></div></div>')
    num++;
  });
  $("#article_name").autocomplete({
    source: 'articlesearch.php'
  });

  $("#author1_name").autocomplete({
    source: 'authorsearch.php'
  });
  $("#author2_name").autocomplete({
    source: 'authorsearch.php'
  });
  $("#author3_name").autocomplete({
    source: 'authorsearch.php'
  });
  $("#author4_name").autocomplete({
    source: 'authorsearch.php'
  });
  $("#author5_name").autocomplete({
    source: 'authorsearch.php'
  });
  $("#author6_name").autocomplete({
    source: 'authorsearch.php'
  });
  $("#author1_university").autocomplete({
    source: 'universitysearch.php'
  });
  $("#author2_university").autocomplete({
    source: 'universitysearch.php'
  });
  $("#author3_university").autocomplete({
    source: 'universitysearch.php'
  });
  $("#author4_university").autocomplete({
    source: 'universitysearch.php'
  });
  $("#author5_university").autocomplete({
    source: 'universitysearch.php'
  });
  $("#author6_university").autocomplete({
    source: 'universitysearch.php'
  });
});

I'd like it to place a wildcard to the number in the author1_name and author1_university so that I don't have to repeat the selector multiple times in my code. Your help is greatly appreciated.

could you give the elements a specific class, like class="author_name" then call the $(".author_name").autocomplete(...) — John Boker, Nov 25 '15 at 18:47
@JohnBoker I thought of that but didn't know if it was proper practice to add tons of different class names to single elements — , Nov 25 '15 at 18:48
Possible duplicate of [Wildcards in jQuery selectors](http://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors) — d0nut, Nov 25 '15 at 18:49
I dont see any harm in adding classes to specific elements here. — John Boker, Nov 25 '15 at 18:50
@JohnBoker Well I just realized this is actually based off of the element id not the class.... — , Nov 25 '15 at 18:51
another option if you don't want to use classes is to use a for loop. Something like... `for (var i=1;i<=6;i++) { $("#author"+i+"_name").autocomplete({ source: 'authorsearch.php' }); }` and then repeat that for the university one. — Cave Johnson, Nov 25 '15 at 18:52
@TaylorClark John Boker is suggesting that you add the classes as well to make it easier to select. In actuality, though, if you want to keep your current configuration you should be able to do this `$("[id^='author'][id$='_university']")` — d0nut, Nov 25 '15 at 18:53
@iismathwizard what is the most common practice? Sorry I am new to this — , Nov 25 '15 at 18:54
To be honest, since they're all related elements I would expect them to share a class (for styling purposes). Personally, I would put a `author_university` class on each one of those and then use jquery as so `$(".author_university")` since it would make more sense. — d0nut, Nov 25 '15 at 18:55
@TaylorClark I'll post an answer with the contents of my comment so you can accept it if you want. — d0nut, Nov 25 '15 at 18:57

Charlie · Answer 1 · 2015-11-25T19:02:21.710

Use the selector like this:

$("[id^=author]").autocomplete({
    source: 'universitysearch.php'
  });

This finds the ids which starts with author.

To find the ids that end with _university :

$("[id$=_university]").autocomplete({
    source: 'universitysearch.php'
  });

Adding a separate class to all the elements you need to select also is a solution. You can add the class author_of_university to the elements and select like:

$(".author_of_university").autocomplete({
        source: 'universitysearch.php'
 });

score 1 · Accepted Answer · answered Nov 25 '15 at 19:00

You have two routes here:

You can put a single class on each of the like elements.

class="author_university"

JQuery: $(".author_university")
Or use a selector for id like so:

$("[id^='author'][id$='_university']")

This selects any element with an id starting with "author" and ending with "_university".

score 0 · Answer 3 · answered Nov 25 '15 at 18:56

0

Jquery has a "starts with" selector:

$( "[id^='author']" ).autocomplete({});

answered Nov 25 '15 at 18:56

mcgraphix

2,723
1
11
15

How to add wildcard to CSS selectors?

3 Answers3