jQuery - get all img from src from a parent and erase a part of it

Question

I want to get all img src from a parent of the pointer to erase a part of them. When I have a picture selected, the src finished by _selected.jpg , and when I click on a link which contains another img I want to erase _selected.jpg of the older selected img.

HTML

<div class="attribute_list">
    <ul id="color_to_pick_list" class="clearfix">
        <li class="selected">
            <a href="http://xxx.html" id="color_18" name="46cm" class="color_pick selected" title="46cm">
                <img src="http://xxx/co/18_selected.jpg" alt="46cm" title="46cm" width="102" height="100" class="attribute_pic">
            </a>
        </li>
        <li>
            <a href="xxx.html" id="color_19" name="56 cm" class="color_pick" title="56 cm">
                <img src="http://xxx/co/19.jpg" alt="56 cm" title="56 cm" width="102" height="100" class="attribute_pic">
            </a>
        </li>
    </ul>
    <input type="hidden" class="color_pick_hidden" name="group_4" value="18">
</div>

Function js:

function colorPickerClick(elt){
var isSelected = "_selected";
var jpg = ".jpg";

id_attribute = $(elt).attr('id').replace('color_', '');

$(elt).parent().parent().find('img').attr('src',$(elt).parent().parent().find('img').attr('src').replace(isSelected + jpg, jpg));

$(elt).parent().parent().children().removeClass('selected');
$(elt).fadeTo('fast', 1, function(){
$(this).fadeTo('fast', 0, function(){
    $(this).fadeTo('fast', 1, function(){
        $(this).parent().addClass('selected');
        });
    });
});
$(elt).parent().parent().parent().children('.color_pick_hidden').val(id_attribute);


$(elt).children("img").attr('src',$(elt).children("img").attr('src').replace(jpg,isSelected + jpg));}

Event:

$(document).on('click', '.color_pick', function(e){
e.preventDefault();
colorPickerClick($(this));
getProductAttribute();});

When i click on 19.jpg , the 18_selected.jpg becomes 18.jpg but 19.jpg becomes 18_selected.jpg

Answer 1

function colorPickerClick(elt) {
var isSelected = "_selected";
var jpg = ".jpg";

id_attribute = $(elt).attr('id').replace('color_', '');

$(elt).parent().parent().children('.selected').find('img').attr('src',$(elt).parent().parent().children('.selected').find('img').attr('src').replace(isSelected + jpg, jpg));

$(elt).parent().parent().children().removeClass('selected');
$(elt).fadeTo('fast', 1, function(){
$(this).fadeTo('fast', 0, function(){
    $(this).fadeTo('fast', 1, function(){
        $(this).parent().addClass('selected');
        });
    });
});
$(elt).parent().parent().parent().children('.color_pick_hidden').val(id_attribute);


$(elt).children("img").attr('src',$(elt).children("img").attr('src').replace(jpg, isSelected + jpg));}

I find the good selector finally ! :)

But I have another answer. How I could make a condition on a selector?

If the img who is pointed is from the class attribute_pic_color don't add "_selected" to the file name of the img.

Hope someone could help me for this problem.