jQuery: كيفية الحصول على أقرب قيمة عند النقر فوق زر؟

Question

لا أستطيع أن أحصل على هذا الرمز للعمل. كيف يمكنني الحصول على أقرب قيمة من .abc عند النقر فوق الزر؟

تحديد الأقرب

أي: إذا قمت بالنقر فوق الزر "A: A:" في أريد قيمة 10. إذا قمت بالنقر فوق الزر المدرج في "B:" أريد قيمة 20.

هنا هو الرمز:

<script type="text/javascript">
$(function(){

 $('.test').click(function(){
  var value = $(this)
     .parent()
     .parent()
     .closest(".abc")
     .attr("value")
  alert(value);
  return false
 });

});
</script>
<form name="myform">
<table>
 <tr>
     <td>A:</td>
        <td><input type="text" class="abc" name="a" id="a" value="10" /></td>
        <td><input type="text" name="vbn" id="vbn" /></td>
        <td><input type="text" name="mkl" id="mkl" /></td>
        <td><input type="button" class="test" name="test" id="test" value="test" /></td>
        <td>B:</td>
        <td><input type="text" class="abc" name="b" id="b" value="20" /></td>
        <td><input type="text" name="ews" id="ews" /></td>
        <td><input type="text" name="hrs" id="hrs" /></td>
        <td><input type="text" name="ew3" id="ew3" /></td>
        <td><input type="text" name="3ws" id="3ws" /></td>
        <td><input type="button" class="test" name="test" id="test" value="test" /></td>
    </tr>
    <tr>
     <td>C:</td>
        <td><input type="text" class="abc" name="c" id="c" value="30" /></td>
        <td><input type="text" name="oiu" id="oiu" /></td>
        <td><input type="text" name="dfe" id="dfe" /></td>
        <td><input type="button" class="test" name="test" id="test" value="test" /></td>
    </tr>
    <tr>
     <td>D:</td>
        <td><input type="text" class="abc" name="d" id="d" value="40" /></td>
        <td><input type="button" class="test" name="test" id="test" value="test" /></td>
    </tr>
</table>
</form>

Answer 1

منذ فترة قصيرة، كتبت مكون إضافي قد يساعد في هذا الموقف: يطلق عليه nextall.

• آخر بلوق حول هذا الموضوع
• Repostiory Plugin الصفحة
• صفحة تجريبية

كنت تستخدمه مثل هذا:

$(":button").click(function() {
    $(this).prevALL("td:has(.abc)").eq(0).find(".abc").val();
});

Answer 2

$('input.test').click(function() {

    $(this).parent()
           .prevAll('td:has(input.abc)')
           .find('input.abc:last')
           .val();

});

هنا عرض العمل

Answer 3

تجاهل حقيقة أن رمز HTML الخاص بك منسق بشكل غير صحيح مع عناصر متعددة له نفس المعرف، فإن رمز JavaScript هذا لا يفعل ما تعتقد أنه يفعله. بالاشارة الى http://docs.jquery.com/traversing/clost., closest() يبحث عن الشجرة من أين أنت. لا يوجد عنصر مطابقة .abc في الشجرة مباشرة فوق أي من الأزرار الخاصة بك. ما كنت تبحث عن هو جار وليس أحد الوالدين.

سأحاول شيئا مثل هذا:

$(".test").click(function() {
  $(this).parent().parent().find(".abc").val();
});

لكنه لا يحل مشكلتك حيث تعدد .abc بالقرب من زر معين.

لماذا لا تكتب الكود "بشكل صحيح" ولديك زر يشير مباشرة إلى حقل باستخدام معرفات وفئات متعددة؟