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>

我需要在head-div中使用类“mand”的每个输入来自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>

Answer 2

如果你真的无法修复你的代码，它总是那样（当然我们现在都可以改进它），你可以这样编码：

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

Answer 3

请试试这个

console.log( $(this).prev('.head').find('p').text() );

Answer 4

如果你能够拥有＆＃34; .foo ＆＃34; div 每个＆＃34; .mand ＆＃34;的父级，它看起来像这样。

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

它适用于此html

<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>

Answer 5

要解决这个问题，首先需要按如下方式构建html代码（原始代码对每个输入使用不同的结构，这使得选择器很难在p标签中找到正确的内容。此外，它是一个使用相同的类名命名相似组件的良好做法。）：

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

<div class="head">
  <p class="any">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">         
   <input type="text" class="mand" value="3">
</div>

然后，您可以使用以下jQuery代码来获取内容：

$(".mand").each(function(){
    console.log($(this).parent().prev().children(".any").text());
});

希望这有帮助！

jQuery - 用类获取最近的元素

5 个答案: