2012-02-14 15 views
0

上.prev経由でコンテンツを選択し、変更することはできません。次に、最も近い要素が.fieldsであることを隠し、関数get_new_position_for_all_items()を呼び出します。は、私は次のjQueryを持ってjQueryの

私が抱えている問題は、.sortable_shop_item_positionのクラスを別のものに変更できないため、削除されたget_new_position_for_all_items()フィールドが新しい位置のソートに含まれないようにするためです。

.sortable_shop_item_positionの値を変更するなどの単純な操作を試みましたが、jQueryを識別して選択することができないようです。

.sortable_shop_item_positionには、liで囲まれたものがいくつかあります。

お知らせください。どうもありがとう。

<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> 

は、あなたがたがそのサブ要素で異なると、各<li>をほぼ繰り返されるわかります。

[UPDATE 1] は、ここではいくつかのラフなHTMLです。 と.sortable_shop_item_positionの値が2<li>を削除すると、.sortable_shop_item_position.not_sortableに置き換えて、再ソート時にこのクラスがスキップされるようにしたいと考えています。

+0

ページのHTMLを含めると非常に便利です。 –

+0

'$(link).prev("。sortable_shop_item_position ")'式の結果は何ですか?それはどんな要素も含んでいますか? –

+0

@AnthonyGrist:HTMLで更新されました。 – Victor

答えて

1

$.prevは、あなたが複数.sortable_shop_item_position要素を有する場合、より具体的なセレクタを使用する必要があるかもしれないが、1秒間$.prevAllを試し各要素http://api.jquery.com/prev/

直前の兄弟を取得します。 http://api.jquery.com/prevAll/

また、あなたのDOM構造がある場合:

sortable_shop_item_position 
destroy_field 
link 

、あなたはjQueryのDOMオブジェクトバインドとしてその関数の中に、パフォーマンスを向上させるために、またパスリンクを

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

を使用することができます要素にremove_linksを入力し、thisではなく$(this)、つまり$('a.classname').click(function() { /* contents of remove_links function */ });を使用してください。 $(link)を呼び出すたびに、jQueryはDOM内のその要素を再度検索しなければなりません。 remove_fields($('#linkidselector'))を使用して関数を呼び出す場合は、link.prev()を使用するだけです。例:新たに設けHTML構造ため

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

UPDATE:http://jsfiddle.net/HSv7m/

prevAllを使用しているので罰金になりますそれともvar el = $(link)、そしてさらにel.prev();

を使用するには、コマンド全体がいることも連鎖する可能性があり変更する他の要素は、というリンク要素の兄弟です。他の.sortable_shop_item_position要素は別の親要素LIの下にあるため、prevAllはそうでなければアクセスしません。

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

ありがとう@Benno、私はHTMLで質問を更新しました。あなたの答えに必要な変更があるかどうかアドバイスしてください。私はあなたの答えを後で試してみます。再度、感謝します。 – Victor

+0

@Victor、遅れて返信して申し訳ありません。私は私の反応を更新しました。この場合、 'prevAll'が最良の選択です。 – Benno

+0

nice!それは魅力のように働く。ちょうど不思議なことに、実際には.attr( 'class'、 'not_sortable') 'の代わりに' .val( "999") 'でテストしようとしましたが、前者は動作しませんでした。しかし、既存の価値がある。なぜなのかご存知ですか?感謝万円! – Victor

関連する問題