Question

我有这个小的html代码：

input

如您所见，child文本位于id中，该文本以具有input的div之后的下一个div为父。有没有一种方法可以在不基于id id为其本身设置head-n的情况下获取parent-x的值？

我有id个div，我可以为每个input设置一个input，但是我猜-不确定-我必须定义一个包含{{1}的变量}值x乘以-foreach id，我想避免这种情况。

到目前为止，我已经尝试过：

//head-x being either one of those head divs
var test = $('#head-x').next('div').find('input:text').val();

//head-x being either one of those head divs
var test = $('#head-two').next('div').find('input:text').val();
console.log(test)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- one -->
<div id="parent-one">
  <div id="head-one">
    <!-- some code here -->
  </div>
  <div>
    <div>
      <input type='text' value='x' name='name'>
    </div>
  </div>
</div>

<!-- two-->
<div id="parent-two">
  <div id="head-two">
    <!-- some code here -->
  </div>
  <div>
    <div>
      <input type='text' value='y' name='name'>
    </div>
  </div>
</div>

Answer 1

我看到了此评论...

我需要将该值通过ajax发送到php脚本-发生在head-x上的点击

所以您已经有了Ajax的点击处理程序...

据我所知，您可以充分利用attribute selector和“开头为”运算符^=。

然后，使用$(this)代替$("#head-one")或$("#head-two")。

$("[id^='head-']").on("click",function(){
  var inputValue = $(this).next().find("input").val();
  console.log(inputValue);
});

[id^='parent']{
  padding:1em;
}

[id^='head']{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- one -->
<div id="parent-one">    
    <div id="head-one">
        Click on the "head-one"!
    </div>
    <div>
        <div>
            <input type='text' value='x' name='name'>
        </div>
    </div>
</div>

<!-- two-->
<div id="parent-two">
    <div id="head-two">
        Click on the "head-two"!
    </div>
    <div>
        <div>
            <input type='text' value='y' name='name'>
        </div>
    </div>
</div>

Answer 2

使用id代替class，您可以绑定click事件处理程序并从下一个div读取输入值。

$(function(){
  $("div.head").on("click", function(){
      var $next = $(this).next();
      var value = $next.find('input[type=text]').val();
      console.log(value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent-one">    
    <div class="head">
        Head 1
        <!-- some code here -->
    </div>
    <div>
        <div>
            <input type='text' value='x' name='name'>
        </div>
    </div>
</div>

<!-- two-->
<div id="parent-two">
    <div class="head">
         Head 2
        <!-- some code here -->
    </div>
    <div>
        <div>
            <input type='text' value='y' name='name'>
        </div>
    </div>
</div>

从下一个div的子代中选择输入类型的文本

2 个答案: