jQuery next() 和 $(this)

Posted 2023-05-09

【中文标题】jQuery next() 和 $(this)

【英文标题】：jQuery next() with $(this)

【发布时间】：2013-05-23 23:20:37

【问题描述】：

我有一个包含重复元素集的表单。

当带有credit_req_select 类的选择发生变化时，我想显示/隐藏并可能仅清除带有credit_line_text 类的下一个文本输入。

下面的 change() 函数没有找到文本字段，我认为这一定与我使用 $(this) 的方式有关。

获取这些文本字段的正确方法是什么？

我的 html 是

<p class="file_info">*Credit Required: 
    <select name='default_credit_requirements' id='default_credit_requirements' class="credit_req_select">
<option></option>
<option value='1' selected>Do not include</option>
<option value='2' >Include if able</option>
<option value='3' >Must include</option>
</select>
    </p>
    <p class="file_info">
      <label>*Credit Line:
        <input  type="text" name="default_credit_line" id="default_credit_line" class="credit_line_text" value="" />
      </label>
    </p>

我的函数长这样，和这里Jquery next adjacent selector with $(this)的答案一样

$('.credit_req_select').change(function() 
    if(this.value > 1)     
        $(this).next(".credit_line_text").show();
        console.log($(this).next(".credit_line_text").attr('id'));
     else 
        $(this).next(".credit_line_text").val('');
        $(this).next(".credit_line_text").hide();   
    
);

我也试过这个答案jquery next() returning nothing

$('.credit_req_select').change(function() 
    if(this.value > 1)     
        $(this).nextUntil(".credit_line_text").show();
        console.log($(this).nextUntil(".credit_line_text").attr('id'));
     else 
        $(this).nextUntil(".credit_line_text").val('');
        $(this).nextUntil(".credit_line_text").hide();  
    
);

还尝试将其分配给每个 jQuery $(this).next() not working as expected 的 var

【问题讨论】：

.next 只查看紧邻的下一个兄弟。就您而言，您正在与第二代堂兄弟一起工作。

.next() method 如果与您提供的选择器匹配，则仅选择紧随其后的同级元素，如果下一个元素不匹配，则不选择任何内容。 .next() not 在 DOM 中向下搜索以寻找匹配的元素。 .nextUntil() 方法有更多关于它的搜索氛围，但它仍然只处理以下兄弟姐妹。

【参考方案1】：

试试这个 -

$(this).closest('p.file_info').next().find(".credit_line_text")

由于您的输入已经有一个 ID default_credit_line 并且 ID 应该是唯一的，因此您可以使用它。

$('#default_credit_line').val("");

【讨论】：

他应该把那个身份证拿掉。我不认为他让它们独一无二。

我肯定会保持它们的独特性。后续字段是通过 php 中的循环创建的，并具有这些属性 name="credit_line<?=$i?>" id="credit_line<?=$i?>" class="required credit_line_text"

@jerrygarciuh 欢迎您！

【参考方案2】：

您真正应该做的是将每个repeating set of elements 包装在一些东西中。例如 div 和类 element。那么您的选择查询将更容易阅读。

$(this).closest('.element').find(".credit_line_text")