1

I am working on an 3rd party application , which render many <a> links, as follow:

enter image description here

here is the markup for the above 2 links which i marked in yellow:

enter image description here

now i want to write a jquery code which will get fired when the user clicks on the above 2 links. so if user click on "Operational Procedures" link to call a function named "showDialog1", while if user click on "Work Instructions" link to call a function name "showDialog2". here is a sample of the function that will be called, which will mainly show the page inside a dialog box:

<script type="text/javascript" unselectable="on">
    function showDialog2() {
        var options = {
            url: "/Pages/Work-Instructions.aspx",
            width: 800,
            height: 775,
            title: "Work Instructions"
        };
        showModalDialog(options);
    }

now to make my code robust to being fired on nu-intended links. So is there a way to define the following jQuery selector:

  1. <a> links which have specific text inside its href.
  2. the <a> should be under an <li>
Cœur
  • 37,241
  • 25
  • 195
  • 267
John John
  • 1
  • 72
  • 238
  • 501
  • 2
    If it is only the two links, why not just give them each an id, and then reference that id with the jQuery selector? – EvSunWoodard Nov 21 '16 at 17:09
  • 1
    Are you looking for something like this? div > a > ul > li As @EvSunWoodard stated if you can give them an ID it becomes easier. – Neo Nov 21 '16 at 17:13
  • @EvSunWoodard as i mentioned this is a 3rd party application so i do not have control over the markup.. i can only write scripts/custom css against the markup – John John Nov 21 '16 at 17:37
  • @MisterPositive can not give them an IDs, as this is a 3rd party web application.. and i do not have control over the markup, i can only write custom scripts against the markup..as i am trying to do now – John John Nov 21 '16 at 17:39
  • @johnG ouch, that will be difficult – Neo Nov 21 '16 at 17:41
  • @MisterPositive why there is not any workaroud to this? – John John Nov 21 '16 at 17:51
  • This was question was marked as a duplicate, but the answer provided doesn't seem to fit what you need. Curious to know if it does... – Neo Nov 21 '16 at 17:53

1 Answers1

1

There are a few parts here.

  1. An <a> link that has specific text inside it's href:

    This seems like a good time for a good old id. What you are implying is that you already have set in stone what will be on the link, so you can set the id when you are setting the href. Then just call $(#yourId)

  2. If you want to select something under something else, jQuery will handle any selector that CSS would. That is to say $("li > a") will work.

EvSunWoodard
  • 1,270
  • 1
  • 10
  • 28
  • if there is an ID for sure i would use it.. but this is a 3rd part application so i do not have control over the markup.. i can only write scripts/custom css against the markup – John John Nov 21 '16 at 17:40
  • Alright, now I understand what you are saying. I do think the 'duplicate' question does show a `$("a[href="noaehusoeh"]")` selector. Might be worth a try. – EvSunWoodard Nov 21 '16 at 17:55
  • but can i say if href contain rahter than equal ? so i can remove the full url – John John Nov 21 '16 at 18:12
  • Again from the linked answer, but appearently what you are looking for is `^=` as in `$("a[href^="http://google.com"]");` – EvSunWoodard Nov 21 '16 at 19:47