查找下一个（）在 jquery 中不起作用

Posted 2023-02-25

【中文标题】查找下一个（）在 jquery 中不起作用

【英文标题】：find next() not working in jquery

【发布时间】：2015-11-19 07:31:36

【问题描述】：

我有一个如下的html格式。

<div class="col-md-3 slide_content">
    <div class="form-group">
        <label for="">How many car?</label>
        <select class="form-control car_no" name="number_of_car" data-amount="<?php $ad = $prices->totalAmount; echo $ad; ?>">
            <option value="" selected>select car numbers</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
    </div>
</div>
<div class="col-md-3 slide_content">
    <div class="form-group">
        <label for="">Method to pay?</label>
        <select class="form-control ad_tt" name="payment_method">
            <option value="">Select Type</option>
            <option value="1">Full Payment</option>
            <option value="2">Advance Payment</option>
        </select>
    </div>
</div>
<div class="col-md-3 slide_content">
    <div class="form-group">
        <label for="">Paying amount</label>
        <div class="total_payment"></div>
    </div>
</div>

当我更改类 car_no 的选项时，我想将类 total_payment 的值设置为“12345”。 这是我的 jquery 代码。

$(document).ready(function() 
    $(".car_no").change(function() 
        $(this).closest('.slide_content').next('.slide_content').next('.slide_content').find('.total_payment:first').innerHTML = '12345';
    );
);

它不工作。我怎么能这样。

【问题讨论】：

$(this).closest('.slide_content').next('.slide_content').next('.slide_content').find('.total_payment').html('12345')

仍然无法工作@satpal

【参考方案1】：

$(document).ready(function() 
  $(".car_no").change(function() 
    $(this).closest('.slide_content.col-md-3').siblings().find('.total_payment').html("12345");
  );
);

找到最近的被点击元素的父元素，在其兄弟元素中找到total_payment。

【讨论】：

代码转储不是有用的答案。说出你做了什么，以及为什么（在发帖之前，而不是之后的忍者编辑）。

它不工作。我在 div 部分中看不到文本

@void ，如果我想将 car_no 更改为 ad_tt，我如何获取 car_no 的数据。这是我的示例代码，但它不起作用$(".ad_tt").change(function() var payment_type = $(this).val(); var a = $(this).closest('.slide_content').parent().next().next().find(".car_no" ).val(); alert(a); );

我没听懂你。您应该将其作为另一个问题发布。如果这解决了您的 OP，那么请将其标记为正确答案。

没关系，我让它工作了。是的，我投票给你的答案@void

【参考方案2】：

$(".car_no").change(function() 
  $(this).closest('.slide_content').siblings().find('.total_payment:first').text('12345');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-3 slide_content">
  <div class="form-group">
    <label for="">How many car?</label>
    <select class="form-control car_no" name="number_of_car" data-amount="<?php $ad = $prices->totalAmount; echo $ad; ?>">
      <option value="" selected>select car numbers</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>
</div>
<div class="col-md-3 slide_content">
  <div class="form-group">
    <label for="">Method to pay?</label>
    <select class="form-control ad_tt" name="payment_method">
      <option value="">Select Type</option>
      <option value="1">Full Payment</option>
      <option value="2">Advance Payment</option>
    </select>
  </div>
</div>
<div class="col-md-3 slide_content">
  <div class="form-group">
    <label for="">Paying amount</label>
    <div class="total_payment"></div>
  </div>
</div>

试试这个方法。获取选择的父级，它是您要输出的 div 的兄弟，然后使用 .siblings()

【参考方案3】：

既然可以用简单的方式编写代码，为什么还要编写代码？由于您的代码结构很简单，因此您可以按照以下方式进行操作：

为<label>分配一个ID。

<label id='amount' for="">Paying amount</label>

<select> 更改时，通过引用其 ID 来更新标签。

$(".car_no").change(function() 
$('label#amount').html("12345");

【讨论】：

我无法分配 ID @Viswalinga，它的内部循环语句。我需要使用类。

您可以轻松地将 ID 分配给label，即使它在循环内。假设您使用的是for 循环，echo "<label id='amount-$i'><label>"; 其中$i 是您用于迭代的变量。您还可以将此引用添加到您的 <select> 相似处。

【参考方案4】：

为了使用next('selector')，目标选择器应该是当前元素的兄弟。 在您的情况下，.next('.slide_content') 不是 select 标记的直接兄弟。所以你能做什么你可以先调用parent()直到select标签的目标同级级别，然后再调用next()。

这行得通：

$(this).parents('.slide_content').next('.slide_content').next('.slide_content').find('.total_payment:first').html('asdfa');

还有两件事，innerHTML 是一个 javascript 函数，不能与 jquery 一起使用。