How to retrieve some text from a sibling div element in jQuery

» javascript » How to retrieve some text from a sibling div element in jQuery

By : Subodh Sawrav

Date : December 01 2020, 04:50 PM

hop of those help? You are not trying to get the siblings, you are trying to get the sibling of the parent .links of this.
Also you have to prevent the default action of the a element. You can do that by calling preventDefault() on the event object.

code :

$('ul.list-links a').click(function(event) {
  event.preventDefault();
  var _portletTitle = $(this).closest('.links').prev('.my_portlet').text();
  console.log(_portletTitle);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_portlet" style="display:none;">
  <span class="asa_portlet_title">Title here</span>
</div>

<div class="links">
  <div class="">
    <ul class="list-links">
      <li class="margin-bottom-medium">
        <a href="linkhere.html" target="_self">Link name</a>
        <a href="linkhere.html" target="_self">Link name</a>
        <a href="linkhere.html" target="_self">Link name</a>
        <a href="linkhere.html" target="_self">Link name</a>
      </li>
    </ul>
  </div>
</div>

<div class="my_portlet" style="display:none;">
  <span class="asa_portlet_title">Title here 2</span>
</div>

<div class="links">
  <div class="">
    <ul class="list-links">
      <li class="margin-bottom-medium">
        <a href="linkhere.html" target="_self">Link name 2</a>
        <a href="linkhere.html" target="_self">Link name 2</a>
        <a href="linkhere.html" target="_self">Link name 2</a>
        <a href="linkhere.html" target="_self">Link name 2</a>
      </li>
    </ul>
  </div>
</div>

Share :

Can't get sibling element text with jQuery

By : SatishS

Date : March 29 2020, 07:55 AM

I wish did fix the issue. I have the following markup:

code :

<script>
jQuery(document).ready(function()
{
    jQuery(".increase_quantity").click(function()
    {
        alert('Setup Price: ' + $(this).parent('td').siblings('td.price_setup').html());
    });
});

</script>

 <table>
     <tr>
       <td>2 
       <i class="increase_quantity hidden-print icon-plus-sign">12</i>
       <i class="decrease_quantity hidden-print icon-minus-sign"></i>12</td>
       <td class="price_setup">10.0</td>
   </tr>
</table>

How to get text sibling of element using jQuery?

By : MorganLiu

Date : March 29 2020, 07:55 AM

fixed the issue. Will look into that further Use jQueryElement.text() to grab all the text. Use String#spplit to split the string

code :

var text = $('#content').text();
var split = text.trim().split('\n');
split.forEach(function(el) {
  var splitAgain = el.split(':');
  console.log("Key:  " + splitAgain[0].trim() + "   Value:  " + splitAgain[1].trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td id="content">
      <b>Status:</b>ACTIVE;
      <b>Type:</b>CN - CONSTRUCTION
      <b>Added:</b>02/24/2012
    </td>
  </tr>
</table>

How to get sibling text after element using jquery?

By : Galan2X

Date : March 29 2020, 07:55 AM

this one helps. Use javascript nextSibling property to getting text sibling after element.

code :

$("b").each(function(){
    console.log(this.nextSibling.nodeValue.trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>       
   <b>Intro Date:</b> 8/14/15               
   <br><b>SKU#:</b> 7333                
   <br><b>Use:</b> MULTIPURPOSE             
   <br><b>Direction:</b> RAILROADED             
   <br><b>Width:</b> 54"                
   <br><b>Horiz Repeat:</b> 6.75                
   <br><b>Vert Repeat:</b> 0.0      
</div>

How to get the text from a sibling anchor element in jquery?

By : user2296060

Date : March 29 2020, 07:55 AM

Hope this helps You can use .prev() to get the immediately preceding sibling element in jquery:

code :

$(idSelectedFlotAlu).prev("a").text()

var idSelectedFlotAlu = ''; //ID of Selected Student

function myFunction(idElemento) {
  idSelectedFlotAlu = "#" + idElemento;
  console.log($(idSelectedFlotAlu).prev("a").text())
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<table>
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <a href="#"> John Doe</a>
        <i class="fas fa-chart-pie" id="test1" onclick="myFunction(this.id)"></i></td>
    </tr>
  </tbody>
</table>

How to get sibling text of element using jquery

By : Galih Panji Saputra

Date : March 29 2020, 07:55 AM

it should still fix some issue Use jquery prev() and next() selector to finding target span and use nextSibling property to finding sibling text of span.