Essayez ceci:

$( document ).ready(function() {
var products =  $(".nav-tab a[data-name=Products]");
  $(products).hover(function(){
    $(this).addClass('red-border');
    }, function(){
    $(this).removeClass('red-border');
  });
  $('span',products)[0].innerText="Merchandise";
});

Lorsque vous utilisez $ (". nav-tab") [1] vous échappez le wrapper de jQuery autour de l'objet, c'est pourquoi il ne permet pas d'utiliser des éléments liés à jQuery, non testés mais vous pouvez essayer de corriger cela en l'enveloppant à nouveau comme $ ($ (". nav-tab") [1]). hover (), mais ce n'est pas la façon dont vous devriez le faire.

La meilleure façon serait pour utiliser une combinaison du sélecteur CSS et de la fonction .parent () de jQuery, comme ceci:

products.find("span").text("Merchandise");

De cette façon, vous sélectionnez simplement le premier parent de l'élément trouvé ci-dessus.

Peut également ajouter un sélecteur spécifique ci-dessus pour le faire comme ceci (pas obligatoire cependant):

let products = $("[data-name='Products']").parent(".nav-tab");

https://api.jquery.com/parent/

Et pour les modifications de texte, utilisez simplement la fonction .text () de jQuery :

let products = $("[data-name='Products']").parent();

https://api.jquery.com / text /

Peut également vérifier ceci pour savoir comment sélectionner le premier objet parmi de nombreux objets avec jQuery https://api.jquery.com/first/

EDIT : Puisque vous obtenez le deuxième objet, le .first () ci-dessus n'est pas pertinent, .get () est ce que vous voulez, mais ce n'est toujours pas la façon dont vous devriez le faire, car comme vous mentionné si vous ajoutez un autre onglet de navigation, cela gâchera tout.

Utilisez ce code:

$( document ).ready(function() {
    var products = $( ".nav-tab").find("[data-name='Products']");
  products
  .mouseover(function(){
    $(this).find("span").text("Merchandise").closest(".nav-tab").addClass("red-border");
  })
  .mouseout(function(){
    $(this).parent(".nav-tab").removeClass("red-border");
    //Again if you want to replace "Merchandise" to "Product" then active this commanded line
    //$(this).closest(".nav-tab").removeClass("red-border").find("span").text("Products");
  });
});

J'ai mis à jour votre code dans Fiddler: https://jsfiddle.net/Arif2009/gksoynLq/31/

Déréférencement d'objets jQuery

Lorsque vous utilisez ... .get (0) code > (ou ... [0] ) vous déréférencer l'objet jQuery, le transformant ainsi en un objet JavaScript simple. Aucun objet ne peut être "vu" par les méthodes de l'autre. N'utilisez pas .get (0) , il suffit généralement de stocker un objet jQuery dans une variable seule.

La méthode IMO .hover () est problématique et est facilement remplacée par la pseudo-classe CSS : hover . En tant que solution jQuery, la méthode .on () avec les événements mouseenter et mouseleave est meilleure afin que vous puissiez gérer chaque événement séparément. .innerText est une propriété JavaScript simple qui ne reconnaît pas les objets jQuery, utilisez plutôt la méthode jQuery .text () .

Aussi, au lieu de CSS border , utilisez plutôt outline . contour n'ajoute pas sa longueur tandis que border provoque ainsi le décalage des éléments voisins.

---

Démo

Détails commentés dans la démo.

<nav>
  <div class="nav-tab">
    <a class="nav-link" data-name="About">
      <div class="item-menu">
        <span>About</span>
      </div>
    </a>
  </div>
  <div class="nav-tab">
    <a class="nav-link" data-name="Products">
      <div class="item-menu">
        <span>Products</span>
      </div>
    </a>
  </div>
  <div class="nav-tab">
    <a class="nav-link" data-name="Contact">
      <div class="item-menu">
        <span>Contact</span>
      </div>
    </a>
  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

.red-border {
  outline: 3px dashed red
}

$(document).ready(function() {
  // Reference as a jQuery Object
  const products = $('[data-name="Products"]');
  // Register both events on element...
  products.on('mouseenter mouseleave', function(event) {
    // if the type of event is 'mouseenter...
    if (event.type === 'mouseenter') {
      // Get it's descendant <span>, change it's text, then add .red-border to it
      $(this).find('span').text("Merchandise").addClass("red-border");
      // Otherwise do the opposite
    } else {
      $(this).find('span').text("Product").removeClass("red-border");
    }
  });
});