Jump to content

jQuery - on click - find element whose class contains a variable


jimleeder123

Recommended Posts

I've got a bit of jQuery that is getting the bit of data that I want to search the page for. This is posted below.

$(".pagelink").click(function(){
	
		var myClass = this.className;
		var number = myClass.substr(myClass.length - 1);
		
	});

This bit is working ok. It gets the last bit of the element's class name which is a number incremented by the PHP that echoes it out.

 

Now I want to search the page for a div that has a class that contains that var number. There will be a div somewhere on the page with a class that contains that number. It will be called either row0, row1, row2, row3 etc etc.

 

The div is not a descendant element of the pagelink class, it is somewhere else so I don't think the find() variable is suitable.

 

Any help will be greatly appreciated, thanks!

Link to comment
Share on other sites

The whole approach looks very weird and very inefficient. Why would you use sequential classes? Why not IDs? And what happens when the numbers exceed one digit, thus breaking your substr() hack?

 

You haven't provided any context, but it looks like what you actually want is one sequential ID per row. And the page links should store the corresponding row ID in a data attribute so that you don't have to pull it out of some class name.

Link to comment
Share on other sites

I'm looking for a div that has the class row0 if the clicked element is pagelink0, row1 if its pagelink1 etc. Please note that the row div is not a child element, pagelink is a child element of another element (div called paginationwrap).

 

Requinix can you please tell me how to do search in jQuery? Haven't done it before.

Link to comment
Share on other sites

I'm looking for a div that has the class row0 if the clicked element is pagelink0, row1 if its pagelink1 etc.

 

You already said that, and I just told you that your approach is stupid. So instead of banging your head against a wall, why don't you choose an approach which actually makes sense?

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Page title</title>
        <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script>
            $(function () {
                $('.pagelink').click(function () {
                    var targetID = $(this).data('target');
                    var target = $("#" + targetID);

                    alert(target.text());
                });
            });
        </script>
    </head>
    <body>
        <a href="#" class="pagelink" data-target="row-1">Link to row #1</a>
        <a href="#" class="pagelink" data-target="row-2">Link to row #2</a>
        <a href="#" class="pagelink" data-target="row-3">Link to row #3</a>
        <div id="row-1">This is the content of row #1</div>
        <div id="row-2">This is the content of row #2</div>
        <div id="row-3">This is the content of row #3</div>
    </body>
</html>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.