CODEWITHSUNDEEP
jqueryjson
JMon
JMon

Reputation: 3447

Target class with JQuery

I have the following code,

<span class="rpText">
  <img class="favMenuItemImg" alt="arrow" src="Images/rightArrow.png">
  <b>
     <i>New Products</i>
  </b>
</span>

<span class="rpText">
  <img class="favMenuItemBlankImg" alt="" src="Images/transparent.png">
    Profile
  </span>
</span>

and I want to target the favMenuItemBlankImg class and only set the favorite image if there is this class.

I tried the following JQuery:-

for (var i = 0; i < items.get_count() ; i++) {
    if (!$(this).siblings('span.rpText.favMenuItemBlankImg '))
    {
        items.getItem(i).set_imageUrl("Images/favorites_small.png");
    }
}

but this is not working.

JQUERY UPDATE---------------------------------------------------------

if (item.get_text() == "Favorites") {
    panelItem = panel.findItemByText(item.get_text());
    var items = panelItem.get_items();

    for (var i = 0; i < items.get_count() ; i++) {

        $('img.favMenuItemBlankImg').each(function () {
            $(this)[i].getItem(i).set_imageUrl("Images/favorites_small.png");
        });
    }
}

Upvotes: 0

Views: 363

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34178

Find items with a class and set the src?

$('img.favMenuItemBlankImg').attr('src',"Images/favorites_small.png");

EDIT per comment: something like these for the indexed value perhaps?

$('img.favMenuItemBlankImg').each(function(i){
   $(this)[i].set_imageUrl("Images/favorites_small.png");
});

OR

$('img.favMenuItemBlankImg').each(function(i){
   $(this)[i].getItem(i).set_imageUrl("Images/favorites_small.png");
});

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362430

It would definitely be better to use font-weight and font-style in your code as @tymeJV suggests, but if your stuck with <b> and <i>, you can select find "titles" like this:

$.each($('.rpText'),function(i,e){
    if ($(e).find('b').length>0) {
       alert ($(this).html()); //this element has 'b'
    }
});

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

A much better approach would be using a title class that gives the text bold and italic, then search for that class.

The CSS

.title {
    font-weight: bold;
    font-style: italic;
}

The HTML

<span class="rpText">
    <img class="favMenuItemImg" alt="arrow" src="Images/rightArrow.png">
    <span class="title">New Products</span>
</span>

<span class="rpText">
    <img class="favMenuItemImg" alt="" src="Images/transparent.png">
    <span>
        Profile 
    </span>
</span>

The jQuery

$("img.favMenuItemImg").next().each(function() {
    if ($(this).hasClass("title")) {
        //do what you want
    }
});

Here's a fiddle demoing the concept: http://jsfiddle.net/xAPfu/

Upvotes: 0

Related Questions