定位<a> within <h> of parent element with jQuery</h></a>

时间:2014-02-07 10:26:14

标签: jquery jquery-selectors accordion addclass

出于某种原因对此感到非常困难......这是一个必要的标记:

<a href="about.htm#test">About PFD</a>
<ul id="acc1" class="accordion hidden" style="list-style-type:none">
  <li>
    <h2 id="test" class="header">Our Story</h2>

    <div class="inner">
      <ul style="list-style-type:none">
        <li>
          <h3 class="header">Stand Alone: PFD is a different kind of company.</h3>
          <div class="inner">
              <p align="justify" class="bodytext">One that doesn’t conform and isn’t constrained by what others have done or are currently doing as none of that will affect what we will do. At every position, at every task and under any and all circumstances we intend to leave no doubt. Whether in the quality of our products, craftsmanship, client service, form of process, source relationships or our environmental footprint we widen the gap between role players and innovators. What makes it fundamentally easy to do just that at PFD is that one can always count on the individual next to them doing the exact same thing. </p>
          </div>
        </li>
        <li>
          <h3 class="header">Ambassadors:</h3>
          <div class="inner">
              <p align="justify">As much as a finished product ties into its original raw material so does the heart of a company tie into its people. A company is the embodiment of the collective personas that give it purpose, perform its tasks and plan its future. The quest for excellence as a notion or a process is flawed as anyone truly in the pursuit of excellence knows they will never find it. They will arrive at the point they dreamed of to realize they have already dreamed of something more excellent. Any viable business must look to secure today while eyeing its next foothold by which it will push itself even higher. Ascension as a phenomenon is only made possible by the feats of real people with extraordinary abilities and even more passion. PFD has embarked upon the perpetual journey negotiated by its ambassadors, broad and far reaching when it can be, narrow and precise when it has to be, but always with the understanding that it will never get to the end as there will never be one.</p>
          </div>
        </li>
        <li>
          <h3 class="header">Tradition:</h3>
          <div class="inner">
              <p align="justify">Present day PFD is a privately held company, owned and operated by family for family. Our business is conducted for the service of our clients and for the families of all the individuals who place their collective talents within our walls and whose deeds spread far beyond that. We encourage pride and passion at every level as nothing great has ever been built or maintained without those components. PFD is a premier processor of high end meat products with a strong focus in USDA Prime Beef. Boasting an extensive selection of products and services ranging from primal cuts to specialized preparation of goods, we at PFD stand ready to achieve and surpass all expectations. From our mail order fulfillment, to portion cut steaks, to sub-primal cuts, we continue to meet the ever changing needs of our clients. The key to our success remains our willingness and ability to provide what our customers need.

                <br>
                <br>
            PFD and subsidiary companies have been synonymous with wholesale meat and in particular Carcass beef packing for many decades. Our tradition of producing quality products and expertise in custom fabricating has been one of distinction and dependability. Today that tradition and expertise have morphed into an establishment which is a leading and cutting edge fabricator of USDA Prime and Higher Beef, Portion Control Specialists, Dry Aging, Custom Grinds, Specialty and Value Added goods and services. Setting the standard for meat operations to follow in respect to quality control and public safety coupled with a legacy of decades in the business, PFD is forging the path of a distinct and well organized institution in the meat industry. The PFD name has been and continues to be recognized as a top tier purveyor and innovator in all that is meat.</p>
          </div>
        </li>
      </ul>
    </div>
  </li>
 </ul>

jQuery就是这个(这里的重要部分):

<script type="text/javascript">

 if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      $('#' + hash + ' .header .h + a .trigger').addClass('open');
      // hash found 
  } else {
      // No hash found
  }
</script>

我的问题是尝试选择位于解析后的html中的父标记或标记内的标记,其中包括基于我使用的手风琴js插件的类,基本上,我想添加一个&# 34;开&#34;我希望在页面加载时打开的手风琴元素的类。 URL在这里:

http://primefooddistributor.com/about.htm

1 个答案:

答案 0 :(得分:0)

当你检查网站时,它不是<h3>而是<h2>元素,手风琴插件可能已经替换了那个。所以选择器应该是:$('#' + hash + ' h2.header.h > a.trigger')或者只是切断标题元素$('#' + hash + ' .header.h > a.trigger')


如果通过手风琴插件创建<a>,则可能是另一个问题。你需要查看插件才能看到,但是大多数插件都没有回调来告诉你它已经完成申请。

一个好的解决方案是使用setInterval递归检查,然后再将其清除。

if (window.location.hash) {
    var hash = window.location.hash.substring(1); 

    var interval = setInterval(function () {
        var a = $('#' + hash + ' .header.h > a.trigger');
        if(a.length){
            //<a> is found this time! apply stuff here
            a.addClass('open');
            /*go to <div class="outer"> and apply display block:
             traverse to the parent 'li' using closest() and find the <div>
             then apply css('display','block') or simply show() 
              since div has a default display block*/
            a.closest('li').find('.outer').css('display','block');


            clearInterval(interval);
        }                       
    }, 500);
} else {
    // No hash found
}

如果您需要向<a>添加一些活动,可以使用.on()

申请