Question

我有一个我刚刚创建的函数，但需要它才能为页面上的每个“.headerRHS_2016 #nav_full li a”工作，而不仅仅是第一个。

jQuery函数代码是

function paddSubNavTriangle () {
    var parentLI = $('.headerRHS_2016 #nav_full li a').width();
    var parentLIPaddingLeft = $('.headerRHS_2016 #nav_full li a').innerWidth() - $('.headerRHS_2016 #nav_full li a').width();

    var valuetoPadLeft = (parentLI / 2) + (parentLIPaddingLeft - 11);

    $('.subnavTriangle').css('margin-left' , valuetoPadLeft +'px');

}

目前，此代码可以使每个.headerRHS_2016 #nav_full li > .subavTriangle get a新传递的margin-left值 - 但它们都获得相同的值。这是由列出的第一个.headerRHS_2016 #nav_full li a的大小决定的。如何调整此功能以使此功能适用于每个.headerRHS_2016 #nav_full li a元素，从而为每个margin-left获取正确的.headerRHS_2016 #nav_full li a值？

HTML代码

<div class="headerRHS_2016">
<ul id="nav_full" >

<li class="first"><a href="#" title="Link 1" >Link 1</a>
<ul>
<div class="subnavTriangle"></div>
<div class="subnavWrapper2016">
<div class="subnavWrapperInner2016">
<li class="first"><a href="#" title="SubLink 1" ><div class="Sub1"></div><span>SubLink 1</span></a></li>
<li><a href="#" title="SubLink 1" ><div class="Sub2"></div><span>SubLink 2</span></a></li>
<li class="last"><a href="#" title="SubLink 3" ><div class="Sub3"></div><span>SubLink 3</span></a></li>
</div>
</div>
</ul>
</li>

<li><a href="#" title="Link 2" >Link 2</a>
<ul>
<div class="subnavTriangle"></div>
<div class="subnavWrapper2016">
<div class="subnavWrapperInner2016">
<li class="first"><a href="#" title="SubLink 1" ><div class="Sub1"></div><span>SubLink 1</span></a></li>
<li><a href="#" title="SubLink 1" ><div class="Sub2"></div><span>SubLink 2</span></a></li>
<li class="last"><a href="#" title="SubLink 3" ><div class="Sub3"></div><span>SubLink 3</span></a></li>
</div>
</div>
</ul>
</li>

<li><a href="#" title="Link 3" >Link 3</a>
<ul>
<div class="subnavTriangle"></div>
<div class="subnavWrapper2016">
<div class="subnavWrapperInner2016">
<li class="first"><a href="#" title="SubLink 1" ><div class="Sub1"></div><span>SubLink 1</span></a></li>
<li><a href="#" title="SubLink 1" ><div class="Sub2"></div><span>SubLink 2</span></a></li>
<li class="last"><a href="#" title="SubLink 3" ><div class="Sub3"></div><span>SubLink 3</span></a></li>
</div>
</div>
</ul>
</li>

<li><a href="#" title="Link 4" >Link 4</a></li>
<li><a href="#" title="Link 5" >Link 5</a></li>
<li class="last"><a href="#" title="Link 6" >Link 6</a></li>

</ul>
</div>

Answer 1

您是否尝试过使用jQuery的每个功能？也许这会得到正确的结果。很难判断，因为我不知道HTML并完全了解情况。

function paddSubNavTriangle () {

    $('.headerRHS_2016 #nav_full li a').each(function () {
        var parentLI = $(this).width();
        var parentLIPaddingLeft = $(this).innerWidth() - $(this).width();

        var valuetoPadLeft = (parentLI / 2) + (parentLIPaddingLeft - 11);

        $('.subnavTriangle').css('margin-left' , valuetoPadLeft +'px');
    });
}

修改

我在html尚未知晓的时候发布了这个问题。我建议你看一下Holts的答案：）

Answer 2

以下内容应该有效：

$().each

基本上，我使用.headerRHS_2016 #nav_full li a来迭代所有$(this).parent().find('.subnavTriangle')，并使用.subnavTriangle查找相应的<beans> <bean id="defaultSftpSessionFactoryOne" class="org.springframework.integration.sftp.session.DefaultSftpSessionFactory"> <property name="host" value="**.***.**.***" /> <property name="port" value="**" /> <property name="user" value="######" /> <property name="password" value="######" /> <property name="allowUnknownKeys" value="true" /> </bean> <bean id="defaultSftpSessionFactoryTwo" class="org.springframework.integration.sftp.session.DefaultSftpSessionFactory"> <property name="host" value="**.***.**.***" /> <property name="port" value="**" /> <property name="user" value="######" /> <property name="password" value="######" /> <property name="allowUnknownKeys" value="true" /> </bean> <bean id="delegatingSessionFactory" class="org.springframework.integration.file.remote.session.DelegatingSessionFactory"> <constructor-arg> <bean id="factoryLocator" class="org.springframework.integration.file.remote.session.DefaultSessionFactoryLocator"> <constructor-arg name="factories"> <map> <entry key="one" value-ref="defaultSftpSessionFactoryOne"></entry> <entry key="two" value-ref="defaultSftpSessionFactoryTwo"></entry> </map> </constructor-arg> </bean> </constructor-arg> </bean> <int:channel id="receiveChannel" /> <int-sftp:inbound-channel-adapter id="sftpInbondAdapter" auto-startup="false" channel="receiveChannel" session-factory="delegatingSessionFactory" local-directory="C:\\Users\\sftp" remote-directory="/tmp/archive" auto-create-local-directory="true" delete-remote-files="false" filename-regex=".*\.txt$"> <int:poller cron="0/10 * * * * ?"> </int:poller> </int-sftp:inbound-channel-adapter>。

Answer 3

function paddSubNavTriangle () {    
    $.each('.headerRHS_2016 #nav_full li a', function( index, value ) {
      var parentLI = $(this).width();
      var parentLIPaddingLeft = $(this).innerWidth() - $(this).width();

      var valuetoPadLeft = (parentLI / 2) + (parentLIPaddingLeft - 11);

      $('.subnavTriangle').css('margin-left' , valuetoPadLeft +'px');
    });
}

Answer 4

如果没有jQuery，你可以尝试这样的事情：

var links = document.getElementById('nav_full').getElementsByTagName('a');
Array.prototype.map.call(links, function(link) {
  //do something with the links
  //or call function ...
  console.log(link);
});

plunker：https://plnkr.co/edit/J5swr9BsQmqbKkLAj5uq

每个元素的jQuery函数

4 个答案: