How to get value from r.fn.init (JQuery selector context)

Question

Hi I try to receive a value from span from table like this:

function getValueFromSibling(this) {
    var id = $(this).parent().siblings('span.childSibbling');
}

Table looks like this:

<tr>
    <td>
      <button type="button" onClick="getValueFromSibling()"></button>
    </td>
    <td>
      <span class="childSibbling">100</span>
    </td>
</tr>

But I receive something like this:

id = r.fn.init [prevObject: r.fn.init(1)]

I found that is simple form of:

var jQuery = function( selector, context ){
   return new jQuery.fn.init( selector, context );
};

So there is the question. How to receive InnerHTML from <span>, or how to convert r.fn.init [prevObject: r.fn.init(1)] to value?

var result = id.val(); and var result = id.get(); dosen't work

try `$('span.sibbling').html()`? – Stéphane Ammar Jan 05 '18 at 09:01 — Stéphane Ammar, Jan 05 '18 at 09:01
unfortunately it gives undefined – Adriano Jan 05 '18 at 09:03 — Adriano, Jan 05 '18 at 09:03
You don't want a sibling, you want a child of a sibling. – frikinside Jan 05 '18 at 09:07 — frikinside, Jan 05 '18 at 09:07

bipen · Answer 1 · 2018-01-05T09:32:07.593

5

First of all, this inside your function getValueFromSibling is in window scope pass this context when calling the function

 onClick="getValueFromSibling(this)"

And there are few things missing like text() to get the text you want. Try one below

Better way (actually recommended way):

Html

<tr>
    <td>
      <button type="button" class="some-button"></button>
    </td>
    <td>
      <span class="sibbling">100</span>
    </td>
</tr>

Jquery

$(function(){
  $('.some-button').click(function(){
      var id = $(this).closest('tr').find('.sibbling').text();
          // .closest() gets the closest tr parent .
          // .find() finds the element with class 'sibbling' inside that `tr`
          // .text() gets the text inside the element.
  });
});

edited Jan 05 '18 at 09:32

answered Jan 05 '18 at 09:03

bipen

36,319
9
49
62

Ok it works! But I don't have answer how to get value from r.fn.init. – Adriano Jan 05 '18 at 09:10
I like this but it has a problem. `closest` and `find` would give you ANY '.sibling' and not necesary the next or adjacent one. – frikinside Jan 05 '18 at 09:10
@frikinside problem? Can you point it out I might have missed something here.. :) – bipen Jan 05 '18 at 09:11
@frikinside well, closest() will get the first element that matches the selector so in this case will be the first parent `tr` (even if there is another tr above it, it will find the first parent tr) which will always be the same and `find()` will search for `sibling` inside it. Hope that solved your concern. – bipen Jan 05 '18 at 09:13
1

Sure, but with another "match" inside the `tr` for that selector maybe you get something unwanted. For example, with another preceding `td` with same class. I don't know if in the real case of the OP this would be possible, but maybe is interesting to point that out, just as disclaimer. I don't know if I made my point correctly, my english is awful :/ – frikinside Jan 05 '18 at 09:18
1

Yup I agree. There will be other cases too say OP adds another above the button and span is not included in that `tr`. So ya DOM manipulation entirely depends on how the HTML structure is :) :)... Anyways Thanks – bipen Jan 05 '18 at 09:28
@frikinside And ya good point. Also, your english I guess is better than mine. :) .. Happy Coding. – bipen Jan 05 '18 at 09:30
Like I said to @Adriano in another comment, two differents aproachs with differents repercusions. Happy Coding to you too! – frikinside Jan 05 '18 at 09:33

Kwun Yeung · Answer 2 · 2018-03-21T04:44:56.950

4

You should be able to get the text value by using

$("selector").text();

edited Mar 21 '18 at 04:44

answered Jan 05 '18 at 09:03

Kwun Yeung

130
10

You can't even imagine how helpful this was for me – Georgy Martynovich Aug 24 '21 at 12:10

frikinside · Answer 3 · 2018-01-05T09:28:20.533

1

The problem you are facing is that you don't want a sibling, you want a child of a sibling.

function getValueFromSibling(me) {
    var id = $(me).parent().next().find('span.childSibbling').text();
    console.log(id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr>
    <td>
      <button type="button" onClick="getValueFromSibling(this)"></button>
    </td>
    <td>
      <span class="childSibbling">100</span>
    </td>
</tr>
</table>
</body>

With this, first we do a .parent() to move us on the td element. Then, we move on the next td element with .next() and finally, recover the span.childSibbling with find('span.childSibbling'). Using the method .text() for recover the innerText of the node or .html() for the innerHTML of the node.

For the r.fn.init question, there is an excelent answer in this question.

edited Jan 05 '18 at 09:28

answered Jan 05 '18 at 09:09

frikinside

1,244
1
9
19

1

Ok I think I understand how it works, but if there is more `td` elements in this row element before `span` with class `sibbling` it isn't best solution. – Adriano Jan 05 '18 at 09:22
@Adriano Sorry, there was a typo, I made it toa a script and now is returning the value correctly. About your comment, You are right, this is the solution only for the next (and only next) td. bipen answer don't focus on that and pick ANY of the elements with that class. Different aproachs with different repercusions. Choose wisely ;) – frikinside Jan 05 '18 at 09:31

How to get value from r.fn.init (JQuery selector context)

3 Answers3