javascript - jQuery - 获取最近的类元素

Question

我有这样的非常困惑的 html 代码，我无法影响结构。

<div class="head">
  <p class="any">something 1</p>
</div>
<input type="text" class="mand" value="1">

<div class="head">
  <p class="any-else">something 2</p>
</div>
<div class="foo">    
  <input type="text" class="mand" value="2">
</div>

<div class="head">
  <p class="any">something 3</p>
</div>
<div class="foo">    
  <div class="another-needless-div">      
    <input type="text" class="mand" value="3">
  </div>
</div>

我需要类“mand”的每个输入来自 head-div 中的 p 的下一个上面的文本。例如:对于值为“3”的输入字段，我需要 p 文本“something 3”。

$(".mand").each(function(){
  console.log( $(this).prev(.head).find('p').text() ); // not working
});

我怎样才能得到这个内容？谢谢!

Answer 1

您可以尝试这样的操作，这将循环遍历每个父级，直到它具有类 head 的 prev 元素

function parent(obj) {
  if ($(obj).prev(".head").length) {
    return $(obj).prev(".head").find("p").text()
  } else {
    return parent($(obj).parent())
  }
}

$.each($('.mand'), function() {
  console.log(parent($(this)));
})

function parent(obj) {
  if ($(obj).prev(".head").length) {
    return $(obj).prev(".head").find("p").text()
  } else {
    return parent($(obj).parent())
  }
}

$.each($('.mand'), function() {
  console.log(parent($(this)));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="head">
  <p class="any">something 1</p>
</div>
<input type="text" class="mand" value="1">

<div class="head">
  <p class="any-else">something 2</p>
</div>
<div class="foo">
  <input type="text" class="mand" value="2">
</div>

<div class="head">
  <p class="any">something 3</p>
</div>
<div class="foo">
  <div class="another-needless-div">
    <input type="text" class="mand" value="3">
  </div>
</div>