Jquery selecting href with *=

Question

My website has a main image that changes depending on what thumbnails you click on. For a certain main picture, I want text specific to that image to populate. The text starts out as display:none; and then I have it revealed with .show();. Nothing seems to be happening with my code, so any help would be much appreciated. The jquery is:

$(document).ready(function() {
jQuery.fn.exists = function() {
    return this.length > 0;
};
if ($("div.bigimage a[href*='karina']").exists()) {
    $("ul li.karina").show();
    $("ul li.natalia").hide();
    $("ul li.celeste").hide();
}
else if ($("div.bigimage a[href*='natalia']").exists()) {
    $("ul li.karina").hide();
    $("ul li.natalia").show();
    $("ul li.celeste").hide();
}
else if ($("div.bigimage a[href*='celeste']").exists()) {
    $("ul li.karina").hide();
    $("ul li.natalia").hide();
    $("ul li.celeste").show();
}
else {
    $("ul li.karina").hide();
    $("ul li.natalia").hide();
    $("ul li.celeste").hide();
}

});

the html it is trying to select is:

<div class="bigimage">
<li>
<a href="http://cdn.shopify.com/s/files/1/0103/5102/products/Natalia_1024x1024_IMG_5760.jpg?4679">picture here</a></li>
</div>

<ul>
<li id="model-name" class="karina">Karina is 5'7" and is wearing a size 34 C/D Regular</li>
            <li id="model-name" class="celeste">Celeste is 5'8" and is wearing a size 34 C/D Regular</li>
            <li id="model-name" class="natalia">Natalia is 5'10" and is wearing a size 34 A/B Tall</li>
</ul>

Your `if` statements will always evaluate to `false`. Try, for example, using: `($("div.bigimage a[href*='karina']").length)` — David Thomas, Mar 24 '12 at 23:41

score 0 · Answer 1 · answered Mar 24 '12 at 23:43

A call to jquery with a selector does not return a boolean, it returns a collection of matched elements.

So, instead of testing something like :

if ($("div.bigimage a[href*='karina']") === true) {
...
}

You can test the size of the collection returned by jQuery :

if ($("div.bigimage a[href*='karina']").length > 0) {
...
}

More informations here : http://api.jquery.com/jQuery/

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

Add this little function to jQuery

jQuery.fn.exists = function(){return this.length>0;}

And then you can test with

if ($("div.bigimage a[href*='karina']").exists()) {...}

Solution from here Is there an "exists" function for jQuery?

edited May 23 '17 at 12:27

Community

1
1

answered Mar 24 '12 at 23:52

Drazen

2,776
1
25
39

score 0 · Answer 3 · answered Mar 25 '12 at 02:58

maybe you can try to use a string.match statement.

like

 if ( $("div.bigimage a").attr('href').match("karina") ) { 
//some action here
  }

$("div.bigimage a").attr('href') would return a string and .match would find it :)

It's just an idea in case you might find it easier.

score 0 · Accepted Answer · answered Mar 25 '12 at 15:54

0

Your problem is a result of case sensitivity: you are looking for natalia but the link url contains Natalia. There is also a much shorter way to write your code:

$("ul li").hide(); // hide all
var url = $("div.bigimage a")[0].href;
if (url.indexOf("Karina") > -1) {
    $("ul li.karina").show();
}
else if (url.indexOf("Natalia") > -1) {
    $("ul li.natalia").show();
}
else if (url.indexOf("Celeste") > -1 ) {
    $("ul li.celeste").show();
}

answered Mar 25 '12 at 15:54

Dennis

32,200
11
64
79

Also, keep in mind that duplicate `id`s are illegal. Not relevant to your current problem, but potentially creating a problem in the future. – Dennis Mar 25 '12 at 19:32

Jquery selecting href with *=

4 Answers4