使用 parent() 函数添加额外的属性

Question

我正在尝试使用 parent() 函数添加基于 class 名称的 attr。

我的代码如下：

<div class="kiwi-topbar-nav">
    <div class="uk-container">

    <nav class="uk-navbar-container uk-navbar">
        <ul>
            <li><a class="uk-navbar-toggle uk-search-icon" href="#">toggle</a></li>
            <li>...</li>        
        </ul>
    </nav>

    </div>
</div>

<div class="kiwi-main-nav">
    <div class="uk-container">

    <nav class="uk-navbar-container uk-navbar">
        <ul>
            <li><a class="uk-navbar-toggle uk-search-icon" href="#">toggle</a></li>
            <li>...</li>        
        </ul>
    </nav>

    </div>
</div>

Jquery:

$('.uk-navbar-container.uk-navbar').each(function() {

   $toggle = $('.uk-navbar-toggle.uk-search-icon');

  if ( $(this).parent('.kiwi-topbar-nav') ) { 
     $toggle.attr('target', '.kiwi-topbar-nav');
  } else if ( $(this).parent('.kiwi-main-nav') ) {
     $toggle.attr('target', '.kiwi-main-nav');
  } 

});

我注意到属性。 target="kiwi-topbar-nav" 被添加到 kiwi-topbar-nav 和 kiwi-main-nav div 中。虽然取决于父 div 名称，但它应该具有不同的属性。我误解了 parent() 功能吗？如果我是，我应该改用哪个 jquery 函数？

Answer 1

你的$toggle是所有元素都具有类，你需要将其更改为与每个循环中的当前元素相关的元素：

$('.uk-navbar-container.uk-navbar').each(function() {

   $toggle = $(this).find('.uk-navbar-toggle.uk-search-icon'); // change this line

  if ( $(this).closest('.kiwi-topbar-nav').length ) {     // change this to closest (as parent means direct parent - your div is a grandparent) and check against the length to see if it exists
     $toggle.attr('target', '.kiwi-topbar-nav');
  } else if ( $(this).closest('.kiwi-main-nav').length ) {
     $toggle.attr('target', '.kiwi-main-nav');
  } 

});

或者您可以只使用一个函数来设置属性：

$('.uk-navbar-toggle.uk-search-icon').attr('target', function() {
    if ($(this).closest('.kiwi-topbar-nav').length) {  // check if there is a kiwi-topbar-nav 
       return '.kiwi-topbar-nav';                      // returning this sets the target attribute to this value
    } else if ($(this).closest('.kiwi-main-nav').length) {
       return '.kiwi-main-navv';
    }
});

使用 parent() 函数添加额外的属性

Using the parent() function to add an extra attribute

jquery

parent