Question

基本上我试图仅在触发模糊的输入字段的父db_update div类中定位元素，但是它的目标是具有匹配名称的任何类，这不是我想要的。忽略AJAX部分，因为它现在无关紧要。

我认为问题在于它将模糊的输入元素作为目标，并且无法成功链接到父元素。

基本上，无论我点击哪个网址输入框，都应填写哪些字段，而不是两者。

HTML

<div class="db_update">
<p style="font-size: 12px;"><span style="font-weight: normal;">SLIDE URL: <input type="text" class="slide_URL"  /></span></p>
<div class="status_message"> </div>
<p style="font-size: 12px;"><span style="font-weight: normal;">Slide #: <input type="text" class="slide_num" readonly/></span></p>
<p style="font-size: 12px;"><span style="font-weight: normal;">Document #: <input type="text" class="doc_num" readonly/></span></p>
<p style="font-size: 12px;"><span style="font-weight: normal;">Filter(F): <input type="text" class="filter_num" readonly/></span></p>
</div>

<br/>
<div class="db_update">
<p style="font-size: 12px;"><span style="font-weight: normal;">SLIDE URL: <input type="text" class="slide_URL"  /></span></p>
<div class="status_message"> </div>
<p style="font-size: 12px;"><span style="font-weight: normal;">Slide #: <input type="text" class="slide_num" readonly/></span></p>
<p style="font-size: 12px;"><span style="font-weight: normal;">Document #: <input type="text" class="doc_num" readonly/></span></p>
<p style="font-size: 12px;"><span style="font-weight: normal;">Filter(F): <input type="text" class="filter_num" readonly/></span></p>
</div>

Jquery的

$(document).ready(function() {


$('input[class=slide_URL]').on({

   blur: function(){
    var status_message = $('.status_message');
    var query_string = encodeURIComponent($(this).val()); 
    var dataString = 'query_string='+ query_string;

     $.ajax({
      type : 'GET',
      url: '',
      dataType : 'json',

      data:  dataString ,
      error : function(XMLHttpRequest, textStatus, errorThrown) {


          $(this).parent().find('.slide_num').val(140);
            $('.doc_num').val(140);
        $('.filter_num').val(140);

      status_message.removeClass().addClass('failure').text('Request was not sent.').show(200);},

      success : function(data) {


       if (data.error === true)
       {


     status_message.show().removeClass('success').addClass('failure').text(data.msg).stop().fadeOut(3000);


     }
    else {
     status_message.show().removeClass('failure').addClass('success').text(data.msg).stop().fadeOut(3000);




         }
     } 
       });    
 return false; 

   }
 });
 });

Answer 1

要仅定位同一.db_update div中的元素，从您的某个input元素上的事件开始，您可以执行以下操作：

var status_message = $(this).closest(".db_update").find(".status_message");

这是做什么的：

在您的input个元素的事件处理程序中，jQuery将this设置为对DOM input元素的引用。
$(this)围绕该元素创建一个jQuery包装器。
.closest(".db_update")找到与选择器匹配的最近父元素。
.find(".status_message")查找该元素与选择器匹配的所有后代元素。

所以把它分解成碎片，假设this是input（它将在你的事件处理程序中）：

$(this) - 围绕input
$(this).closest(".db_update") - 包含.db_session

input

$(this).closest(".db_update").find(".status_message") - .status_message中的div元素。

Answer 2

使用.closest()获取模糊元素的.db_update祖先，然后.find()找到所需的status_message。

var status_message = $(this).closest('.db_update').find('.status_message');

Jquery使用共享类定位不同的元素

HTML

Jquery的

2 个答案: