CODEWITHSUNDEEP
javascriptjqueryhtml
user5861285
user5861285

Reputation:

jQuery - Get nearest element with class

I have very mess html code like this and i cant influence the structure.

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

I need for every input with class "mand" the next above text from p in the head-div. For example: For the input field with value"3", I need the p text "something 3". 

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

How can i get this content? Thank you!

Upvotes: 0

Views: 126

Answers (5)

Cristal Wu
Cristal Wu

Reputation: 1

To solve this problem, first you need to structure your html codes as follows (Your original codes use different structure for each input, which makes hard for the selector to find the correct contents in the p tag. Also, it is a good practice to name the similar components with the same class name.):

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

Then, you could simply use the following jQuery codes to get the contents:

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

Hope this could help!

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

You can try something like this, this will loop through each parent until it has a prev element with the class head

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>

Upvotes: 3

Jax-p
Jax-p

Reputation: 8593

If you could be able to have ".foo" div parent for every ".mand", it would look like this.

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

it would work for this 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>

Upvotes: 0

Tony Stonks
Tony Stonks

Reputation: 360

If you really can't fix your code, and it will always be like that (which, of course we both now it can be improved), you can code it like this:

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

Upvotes: 0

Pritamkumar
Pritamkumar

Reputation: 686

please try this

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

Upvotes: 0

Related Questions