jQuery for disabling links based on its html content

Question

I want to be able to disable links based on their HTML content. There are many classified sections that are available, but they are not always filled out. I would like the link to be grayed out so that end-viewers know that there is no content for that classified. My HTML structure looks like this:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <p><a class="fancyTxt" href="Classifieds/050.html">050 Farms For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <p><a class="fancyTxt" href="Classifieds/051.html">051 Houses For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <p><a class="fancyTxt" href="Classifieds/052.html">052 Miscellaneous</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->

There is an HTML file for each type of classified, because that is what our classified program outputs. If there is nothing in the classified it places a string of text as a footer, but this text is also in every classified HTML file. This is the text:

<p>www.domainname.com<BR>
Your source for local online<BR>
classifieds!</p>

That text is what I would like to search for to disable links when that is the ONLY text being shown in the classified.

Thank you!

EDIT: Example of a classified page with content.

<!-- Classification Title Here -->
004 Announcements


<!-- Begin output Ad Text  <startTags> </startTags> -->

 <p><FONT SIZE=3>text about classified here</FONT></p><BR><HR>

 <p><FONT SIZE=3>Text about classified here </FONT></p><BR><HR>

 <p><FONT SIZE=3><DIV ALIGN=CENTER>www.domainname.com<BR>
Your source for local online<BR>
classifieds!</DIV></FONT></p><BR><HR>

<!-- End output Ad Text <endTags><BR><HR></endTags> -->

So, are you missing a newline or something in your search? Or you just need a way to disable a link? — Milo LaMar, Feb 03 '14 at 18:57
I need to be able to disable the link. There is no search query, just a list of classifieds that I would like to disable the link for if that string of text is the ONLY thing present in the HTML file. — Joshua Shade, Feb 03 '14 at 18:59
http://stackoverflow.com/questions/10276133/how-to-disable-html-links — Milo LaMar, Feb 03 '14 at 18:59
That only disables the link. I need to have a jquery search parameter based on the anchor's HTML file, which is beyond my scope. — Joshua Shade, Feb 03 '14 at 19:03

tenub · Accepted Answer · 2014-02-03T21:43:35.303

2

Since your issue isn't with disabling the link but rather finding what containers need to be disabled, perhaps try something like:

$('.col-xs-12.col-sm-6.col-md-4.col-lg-4').each(function() {
    var p = $(this).children('p');
    if (p.length === 1 && p.text().match(/^www\.domainname\.com/i) !== null) {
        // disable link within $(this)
    }
});

This grabs all child paragraph elements and ensures there is only one and that its contents begins with the "footer" contents.

edited Feb 03 '14 at 21:43

answered Feb 03 '14 at 19:10

tenub

3,386
1
16
25

This would be something close that I need. There is other text in an empty classified though - the classified title. In reference to my edit: ` 004 Announcements` is an example of what an announcements classified HTML has. Along with the 'footer'. – Joshua Shade Feb 03 '14 at 20:14
Edited to fit your needs better. – tenub Feb 03 '14 at 20:23
Links still click through to the HTML page with updated version. – Joshua Shade Feb 03 '14 at 20:42
Figured out the problem. Silly oversight – `.text()` removes all html tags rather than parsing them as text. Therefore, updated the RegEx search to not include the tags. – tenub Feb 03 '14 at 21:44
@tenub For some reason, it's still clicking through to the HTML page. I have FancyBox loading the HTML file in the same window. I don't know if this would change it any? [imgur picture for reference](http://imgur.com/QQbxHYq) – Joshua Shade Feb 06 '14 at 18:59
Did I need any other bit of code with what code you provided? – Joshua Shade Feb 06 '14 at 19:18
Are your links that you want disabled dynamically generated (ie. after the initial page loads, ie. loaded via ajax or some sort of JS append)? If so, you'd need to use something like: `$(this).on('click', 'a.fancyTxt', function(e) { e.preventDefault(); });`. – tenub Feb 06 '14 at 20:07
No, I don't have any other ajax or JS appends included besides what the FancyBox does. It is an anchor that links to an HTML page with that domain text in the 'footer'. The FancyBox just brings it up on the same screen so it doesn't open a new tab or the same tab for that matter. – Joshua Shade Feb 11 '14 at 18:49
I'll mark this as best answer, but I'd still like help if you can offer it. :) – Joshua Shade Feb 11 '14 at 18:50

score 1 · Answer 2 · answered Feb 03 '14 at 18:59

This should work, HTML :

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <p><a class="fancyTxt" href="Classifieds/050.html">050 Farms For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <p><a class="fancyTxt" href="Classifieds/051.html">051 Houses For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <p><a class="fancyTxt" href="Classifieds/052.html">052 Miscellaneous</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->

JAVASCRIPT :

$('div p:contains("Rent")').find('a').on('click', function(evt) {
    evt.preventDefault();
    return false;
});

This should disable all links containing "Rent" in text.

http://jsfiddle.net/46Zky/

I don't want the links to be disabled based on the link name. Only the contents of each link's HTML. See edit above. — Joshua Shade, Feb 03 '14 at 19:03
Did you test this fiddle, links are disabled based on containing text not the name of the link. Im not sure what do you wan't to search for .. entire A tag together with href or just the content of the tag ? — Goran.it, Feb 03 '14 at 19:40

jQuery for disabling links based on its html content

2 Answers2