如何使用具有唯一类名的jquery定位链接？

Question

<a href="" class="link unique-lightbox-docid(12345)">Download File</a>

First, I want to target links that only have this class identifier: unique-lightbox-id()' into a jquery click action.

Second, I want it to grab the id inside the open/close parenthesis.

Do I need to use regex to accomplish this?

Answer 1

Don't include the ID as part of the class. Use a data attribute as that's what they are for. Then grab that property instead while matching on a class like normal.

 $('.link').click(function (e) { e.preventDefault(); var id = $(this).data('docid'); alert(id); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="" class="link" data-docid="doc1">Download File 1</a><br /> <a href="" class="link" data-docid="doc2">Download File 2</a><br /> <a href="" class="link" data-docid="doc3">Download File 3</a><br /> 

Answer 2

Try utilizing Attribute Contains Selector [name*="value"] String.prototype.match() with parameter RegExp /\\(.*\\)/ , String.prototype.slice() with parameter 1, -1

 $("a[class*=unique]").on("click", function(e) { e.preventDefault(); var res = e.target.className.match(/\\(.*\\)/)[0].slice(1, -1); // do stuff with `res` $("body").append("<br>" + res); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <a href="" class="link unique-lightbox-docid(12345)">Download File</a> 

Answer 3

I would do it this way.

var partialClassName = 'unique-lightbox-docid';

$('[class*="' + partialClassName + '"]').click(function(e){
    var fullClass = $(this).attr('class');
    var firstMatchStr = fullClass.substring(fullClass.indexOf(partialClassName), fullClass.length);
    var elementId = firstMatchStr.match(/\(.*\)/)[0].slice(1, -1);  
    $('#' + elementId).html('This is element with id ' + elementId);
    e.preventDefault();
});

1. Pass the partialClassName you want to find using jQuery selector
2. Get the full class as a string.
3. From the full class find the 1st occurrence in the class string to use as a starting point using indexOf and get the substring beginning at that occurrence.
4. Apply regex searching for the string surrounded by parentheses.
5. Strip off the 1st and last characters as you know they're parentheses.

If you have a class like class="classname(abc) classname2(xyz) unique-lightbox-docid(12345)" the above way will make sure your're starting at unique-lightbox-docid so by you returning the 1st occurrence of the regex match you will make sure you always have the correct id.

For some reason the code formatting isn't coming out correctly with this post but here is a fiddle.

http://jsfiddle.net/SeanWessell/9svvha3q/1/