what is closest function javascript?

Question

I am trying to convert a jquery function to vanila js.I don't know the implementation of that function I just want to convert jquery function to javascript . here is my jquery function.

jQuery('button.vjs-share-control').on('touchstart click', function(e) {
  e.preventDefault();
  if(e.type == "touchstart") {
        var embedDiv = jQuery(this).closest('div.bcvideo');
        var vid = videojs(embedDiv.data('bcobjid'));
        var shareopts = {
            "services": setSocialLinks.call(embedDiv)
        };
        // set share links
        vid.social(shareopts);
        jQuery('#w10close').removeClass('hidden');

  } else if(e.type == "click") {
    var embedDiv = jQuery(this).closest('div.bcvideo');
        var vid = videojs(embedDiv.data('bcobjid'));
        var shareopts = {
            "services": setSocialLinks.call(embedDiv)
        };
        // set share links
        vid.social(shareopts);
        jQuery('#w10close').removeClass('hidden');
  }
});

I covert this function to javascript but I am confused by closest and call function how to convert these jquery function to javascript.

Here is my javascript function (converted jquery function to javascript)

document.querySelector('button.vjs-share-control').addEventListener('touchstart click', function(e) {
  e.preventDefault();
  if(e.type == "touchstart") {
    var embedDiv = document.querySelector(this).closest('div.bcvideo');
    var vid = videojs(embedDiv.data('bcobjid'));
    var shareopts = {
      "services": setSocialLinks.call(embedDiv)
    };
    // set share links
    vid.social(shareopts);
    document.querySelector('#w10close').classList.remove('hidden');

  } else if(e.type == "click") {
    var embedDiv = document.querySelector(this).closest('div.bcvideo');
    var vid = videojs(embedDiv.data('bcobjid'));
    var shareopts = {
      "services": setSocialLinks.call(embedDiv)
    };
    // set share links
    vid.social(shareopts);
    document.querySelector('#w10close').classList.remove('hidden');
  }
});

is it a right converted function ?

Does this answer your question? [Vanilla JavaScript .closest without jQuery](https://stackoverflow.com/questions/28406403/vanilla-javascript-closest-without-jquery) — kmoser, Nov 13 '20 at 06:16
@kmoser thanks for comment ..What do you think is it a correct ? Mean I converted jquery code to javascript .Is javascript code is correct ? will is behave same as jquery code — user944513, Nov 13 '20 at 06:20
What do you expect "`document.querySelector(this)`" to do? Just use `this`. Also your element probably hasn't been extended to have a `.data()` method. How was the jQuery's data appended to that element? Through *data-attribute* or via pure jQuery method? — Kaiido, Nov 13 '20 at 06:27
`No idea` dorry.Also your element probably hasn't been extended to have a .data() method. How was the jQuery's data appended to that element? Through data-attribute or via pure jQuery method? — user944513, Nov 13 '20 at 06:34

score 0 · Answer 1 · answered Nov 13 '20 at 06:28

The Element.closest( ) function can be used to get the closest parent which satisfies the query condition. For example, in the below code, I have the tag and a inside the body tag, I have the same class attached to both and the tags.

Please run the below code and read the comments to understand how Element.closest( ) works in this case:

const inputField = document.querySelector('.textbox');

//logging the inputField variable
console.log(inputField);

//This retuns the <h1> because that is the closest parent
//with 'inner-parent' class.
console.log(inputField.closest('.inner-parent'));

//This returns the 'div' element instead of the 'body'
//although both have the same class, that is because <div>
//is closer to input element than the <body>
console.log(inputField.closest('.outer-parent'));

<body class = 'outer-parent'> 
<div class='outer-parent'>
<h1 class='inner-parent' >
<input type='text' class='textbox'> 
</h1>
</div>
</body>

Also, please note, that the closest( ) function only works on parents, you cannot use it to find parents or siblings directly. However, you can query the parent to get the sibling element if needed.

what is closest function javascript?

1 Answers1