How to target a nested strong with jquery

Question

I'm trying to implement a star rating system using the method here: https://stackoverflow.com/a/1987545/1543310 I've been able to get it to work successfully but I'm trying to tailor it to the output of the woocommerce star rating system so I can easily change the outputted image.

Basically I'm wondering if there's a way to target and change the contents of the <strong> tag in the below html if there wasn't a class attached, as there are a couple other renditions of how the following is outputted, but they all include a strong tag inside a <div class="star-rating">.

HTML:

<div class="star-rating">
    <span>
        <strong class="rating">3.5</strong> 
    </span>
</div>

I've setup a fiddle here with what I'm trying to do: http://jsfiddle.net/AwCLm/ with the woocommerce html output included.

Here's a working example I setup, but it requires a class to be set for the <strong>: http://jsfiddle.net/YYWQx/1/

sorry, I meant to write strong, not span in the question. I've edited for clarity. There is a 'rating' class on the strong in the working example. — Jeremiah Prummer, Mar 27 '13 at 16:50
Are you trying to "target" the `strong` with jQuery, CSS or both? — sellmeadog, Mar 27 '13 at 16:56
both I guess. I need to apply the css to the strong tag in order to apply the style needed for the stars to display properly. — Jeremiah Prummer, Mar 27 '13 at 16:58

Terry · Answer 1 · 2013-03-27T17:02:23.197

1

Edited my answer because I have misunderstood the OP.

If you mean you want to target the <strong> element regardless of whether it has a rating class or not, you can use $('.star-rating strong').stars(); in your JS, and modify the CSS selectors:

.star-rating > span strong {
    display: block;
    background: url(http://testing.wpovernight.com/wp-content/uploads/2013/03/stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}   
.star-rating > span strong > strong{
    background-position: 0 0;
}

http://jsfiddle.net/YYWQx/5/

edited Mar 27 '13 at 17:02

answered Mar 27 '13 at 16:52

Terry

63,248
15
96
118

1

I think OP wants to target a strong without having to put the `.rating` class on it. Something like `$(".star-rating strong")` (but that doesn't work). – Mathew Thompson Mar 27 '13 at 16:54
Thanks for the answer, but I'm not sure how that helps. I need to be able to select the `` regardless of whether or not it has a class associated it. I'm not trying to exclude the rating class, I'm trying to include strongs that have no class. – Jeremiah Prummer Mar 27 '13 at 16:55

score 1 · Accepted Answer · answered Mar 27 '13 at 17:03

This is a solution I got for you.

Is that what you were looking for?

http://jsfiddle.net/migontech/YYWQx/6/

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value
        var val = parseFloat($(this).html());
        // Make sure that the value is in 0 - 5 range, multiply to get width
        var size = Math.max(0, (Math.min(5, val))) * 16;
        // Create stars holder
        var $span = $('<span />').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}
$(function() {
    $('div.star-rating strong').stars();
});

score 0 · Answer 3 · answered Mar 27 '13 at 17:04

In you fiddle you have targeting the direct children > of the div.star-rating which is not going to work instead you shoud try below one:

I think this could help you:

 $('div.star-rating strong').stars();

because $('<strong />').width(size); creates another <strong> in the <strong.rating>

and the change in the css:

strong.rating, strong.rating strong {
  //-----------^^^^^^^^^^^^^^^^^^^^---------You have to include this too.

score 0 · Answer 4 · answered Mar 27 '13 at 17:07

Unless I'm missing something, I don't see why the selector div.star-rating strong doesn't work. If I'm understanding your question, <div class='star-rating'> is always present, you just don't know if the nested <strong> will have a class or not. In this updated fiddle, the star rating seems to have been updated.

http://jsfiddle.net/AwCLm/6/

How to target a nested strong with jquery

4 Answers4