Question

I have the following jQuery:

// get position on new/removed items
function get_new_position_for_all_items() {
    $("li.sortable_shop_item input.sortable_shop_item_position").each(function(index) {
    $(this).val(index + 1);
  });
}

// remove shop_state_fields
function remove_fields(link) {
  $(link).prev("input.destroy_field").val("1");
    $(link).prev(".sortable_shop_item_position").attr('class', 'not_sortable');
  $(link).closest(".fields").hide("slow");
    get_new_position_for_all_items();
}

When I click the remove_fields() link, it will change the value of input.destroy_field which is initially 0. Then it will hide the element with the closest .fields and calls the function get_new_position_for_all_items().

The problem I am having is that I can’t change the class of the nearest .sortable_shop_item_position to something else, so that when get_new_position_for_all_items() this field that has been removed will not be included in the sorting of new position.

I have tried doing something simple such as changing the value of .sortable_shop_item_position, but I just can’t seem to have jQuery to identify and select it.

Note that there are several .sortable_shop_item_position which are wrapped in li.

Please advise. Many thanks.

[UPDATE 1]
Here’s some rough HTML:

<li class="fields sortable_shop_item">
<p style="background-color: yellow; margin: 10px">
<span class="handle">[drag]</span>
<br>
<input id="country_shops_attributes_1_country_date" type="text" value="2012-02-02" size="30" name="country[shops_attributes][1][country_date]">
<label for="country_shops_attributes_1_country_date">country Date</label>
<br>
<input id="country_shops_attributes_1_position" class="sortable_shop_item_position" type="text" value="3" size="30" name="country[shops_attributes][1][position]">
<label for="country_shops_attributes_1_position">Position</label>
<br>
<input id="country_shops_attributes_1__destroy" class="destroy_field" type="hidden" value="false" name="country[shops_attributes][1][_destroy]">
<a onclick="remove_fields(this); return false;" href="#">remove</a>
</p>
<li class="fields sortable_shop_item">
<p style="background-color: yellow; margin: 10px">
<span class="handle">[drag]</span>
<br>
<input id="country_shops_attributes_2_country_date" type="text" value="2012-02-02" size="30" name="country[shops_attributes][2][country_date]">
<label for="country_shops_attributes_2_country_date">country Date</label>
<br>
<input id="country_shops_attributes_2_position" class="sortable_shop_item_position" type="text" value="3" size="30" name="country[shops_attributes][2][position]">
<label for="country_shops_attributes_2_position">Position</label>
<br>
<input id="country_shops_attributes_2__destroy" class="destroy_field" type="hidden" value="false" name="country[shops_attributes][2][_destroy]">
<a onclick="remove_fields(this); return false;" href="#">remove</a>
</p>
<li class="fields sortable_shop_item">
<p style="background-color: yellow; margin: 10px">
<span class="handle">[drag]</span>
<br>
<input id="country_shops_attributes_3_country_date" type="text" value="2012-02-02" size="30" name="country[shops_attributes][3][country_date]">
<label for="country_shops_attributes_3_country_date">country Date</label>
<br>
<input id="country_shops_attributes_3_position" class="sortable_shop_item_position" type="text" value="3" size="30" name="country[shops_attributes][3][position]">
<label for="country_shops_attributes_3_position">Position</label>
<br>
<input id="country_shops_attributes_3__destroy" class="destroy_field" type="hidden" value="false" name="country[shops_attributes][3][_destroy]">
<a onclick="remove_fields(this); return false;" href="#">remove</a>
</p>

You will notice each <li> is almost repeated, but with different in its sub-element. When I remove the <li> with .sortable_shop_item_position valued 2, I want to replace this .sortable_shop_item_position with .not_sortable so that this class will be skipped when re-sorting.

Answer 1

$.prev gets the immediately preceding sibling of each element http://api.jquery.com/prev/

Try $.prevAll for the second one, although you may have to use a more specific selector if you have multiple .sortable_shop_item_position elements. http://api.jquery.com/prevAll/

Alternatively, if your DOM structure is:

sortable_shop_item_position
destroy_field
link

then you can use

$(link).prev().prev(".sortable_shop_item_position").attr('class', 'not_sortable');

Also, for improved performance, pass link into that function as a jQuery DOM object bind remove_links to the elements and use $(this) i.e. $('a.classname').click(function() { /* contents of remove_links function */ });, rather than just this. Each time you call $(link), jQuery has to find that element in the DOM again. If you call the function using remove_fields($('#linkidselector')), then you just need to use link.prev(). Or just var el = $(link), then use el.prev();

Further, you could also chain that entire command:

$(link).prev("input.destroy_field").val("1").prev(".sortable_shop_item_position")
.attr('class', 'not_sortable').end()
.closest(".fields").hide("slow");

UPDATE for newly provided HTML structure: Example: http://jsfiddle.net/HSv7m/

Using prevAll will be fine because the other element you want to modify is a sibling of the link element. The other .sortable_shop_item_position elements are under a different parent LI element, so prevAll won’t access them when it shouldn’t.

$(link).prev("input.destroy_field").val("1").prevAll(".sortable_shop_item_position")
.attr('class', 'not_sortable').end()
.closest(".fields").hide("slow");