通过引用主Parent类直接访问非常嵌套的元素

Question

我正在开发Chrome扩展程序。我有以下HTML实际上属于Facebook。我的目标是获取最新帖子。我可以通过查找 timelineUnitContainer

的类名来获取帖子

<div class="timelineUnitContainer" id="u_jsonp_2_3" data-gt="{"eventtime":"1396797532","viewerid":"100000804868370","profileownerid":"100000804868370","unitimpressionid":"f5511fc8","contentid":"3298878988034773094","timeline_unit_type":"StatusMessageUnit","timewindowsize":"3","query_type":"36","contextwindowstart":"0","contextwindowend":"1398927599"}" data-time="1396685690">
<div class="">
   <div role="article">
      <div class="clearfix mbs pbs _1_m">
         <a class="_29h _303 _51wa" href="https://www.facebook.com/sid.labs?hc_location=timeline" data-ft="{"tn":"\u003C"}" tabindex="0" aria-hidden="true" data-hovercard="/ajax/hovercard/user.php?id=100000804868370&amp;extragetparams=%7B%22hc_location%22%3A%22timeline%22%7D" aria-owns="js_4" aria-haspopup="true" id="js_6"><img class="_s0 _50c7 _54rt img" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/t1.0-1/c4.4.48.48/p56x56/1010859_539620286074795_1558724572_s.jpg" alt=""></a>
         <div class="_3dp _29k">
            <h5 class="_1_s" data-ft="{"tn":"C"}"><span class="fcg"><span class="fwb" data-ft="{"tn":";"}"><a href="https://www.facebook.com/sid.labs?hc_location=timeline" data-hovercard="/ajax/hovercard/user.php?id=100000804868370&amp;extragetparams=%7B%22hc_location%22%3A%22timeline%22%7D">Jhon Doe</a></span></span> </h5>
            <div class="_1_n fsm fwn fcg">
               <a class="uiLinkSubtle" href="/xx/posts/644752595561563?stream_ref=10"><abbr title="Saturday, April 5, 2014 at 1:44pm" data-utime="1396730690">Yesterday</abbr></a> near <a class="uiLinkSubtle" href="https://www.facebook.com/pages/Karachi-Pakistan/110713778953693?ref=stream">Karachi</a>
               <div class="uiSelector inlineBlock audienceSelector timelineAudienceSelector audienceSelectorNoTruncate dynamicIconSelector uiSelectorNormal uiSelectorDynamicTooltip">
                  <div class="uiToggle wrap"><a data-hover="tooltip" aria-label="Public" data-tooltip-alignh="center" class="uiSelectorButton uiButton uiButtonSuppressed uiButtonNoText" href="#" role="button" aria-haspopup="1" aria-expanded="false" ajaxify="/ajax/privacy/privacy_menu.php?iconsize=small&amp;oid=644752595561563" data-oid="644752595561563" data-label="" data-length="30" data-tooltip="Public" rel="toggle" id="js_7"><i class="mrs defaultIcon customimg img sp_5l8dti sx_d52e6e"></i><span class="uiButtonText"></span></a></div>
               </div>
            </div>
         </div>
      </div>
      <div class="_1x1">
         <div class="userContentWrapper">
            <div class="_wk"><span data-ft="{"tn":"K"}" class="userContent">This is my lovely Content.</span></div>
         </div>
      </div>
   </div>
   <div class="fbTimelineUFI uiCommentContainer">
      <form rel="async" class="live_644752595561563_316526391751760 commentable_item hidden_add_comment collapsed_comments" method="post" data-ft="{"tn":"]"}" action="/ajax/ufi/modify.php" data-live="{"seq":0}" id="u_jsonp_2_l" onsubmit="return window.Event &amp;&amp; Event.__inlineSubmit &amp;&amp; Event.__inlineSubmit(this,event)"><input type="hidden" name="charset_test" value="€,´,€,´,水,Д,Є"><input type="hidden" name="fb_dtsg" value="AQEnpAcHTshg" autocomplete="off"><input type="hidden" autocomplete="off" name="feedback_params" value="{"actor":"100000804868370","target_fbid":"644752595561563","target_profile_id":"100000804868370","type_id":"22","assoc_obj_id":"","source_app_id":"0","extra_story_params":[],"content_timestamp":"1396685690","check_hash":"AQCgTxZWjmVEP6RW","source":"13"}"><input type="hidden" autocomplete="off" name="data_only_response" value="1"><input type="hidden" autocomplete="off" name="timeline_ufi" value="1"><input type="hidden" name="timeline_log_data" value="AQCj-VVLcudBa-dHYF87ROBxsove5vhGS-ph8fA7zcCXTQ7GVNZGSJObxBaKcwqlc9wFu-sSdvEsf2BqDIQr3Jlj06NY4pX5AeLfdrTctjlNVTr-GOIzU28gkgNoXjO1rjaJxfhmzE2sqLIy1UsUUmQJqbXD4XWYy44iKAQY36e4d-olZC33TZSwLGiAk2L2XWYR8wYYvRkN2tgJPc8Esb-Yk87YSvWTCrNACWG7zk3YUq7tAr8F3iFdc9VdA0Rap-1v_eXr_UNjDixifU3slASmOExuthv2zaLmUCqPukz3cuDOwzxgzhyoHw3TUtY8t1Lx8QuZ_mZ_UT5pf9kJr2w7e7pzXvl19UVpj7Nqhm0HynxOrPJ0dSASHBCBu4iJt71tSyzsZhrmaPcjpi1ZDHUarORNWoxaR-_ici9DZsBRXQ">
      <div class="fbTimelineFeedbackHeader">
         <div class="fbTimelineFeedbackActions clearfix"><span class="UFIBlingBoxTimeline"><span data-reactid=".j"></span></span><span class="UIActionLinks UIActionLinks_bottom" data-ft="{"tn":"=","type":20}"><span><a class="UFILikeLink" href="#" role="button" aria-live="polite" title="Like this" data-ft="{"tn":"&gt;"}" data-reactid=".k">Like</a></span> · <label class="uiLinkButton comment_link" title="Leave a comment"><input class="uiLinkButtonInput" data-ft="{"type":24,"tn":"S"}" type="button" value="Comment" onclick="return fc_click(this);"></label> · <a class="share_action_link" href="/ajax/sharer/?s=22&amp;appid=25554907596&amp;p%5B0%5D=100000804868370&amp;p%5B1%5D=644752595561563&amp;profile_id=100000804868370&amp;share_source_type=unknown" rel="dialog" data-ft="{"tn":"J","type":25}" title="Send this to friends or post it on your timeline." role="button">Share</a></span></div>
      </div>
      <div>
         <div class="uiUfi UFIContainer" id="u_jsonp_2_t">
            <ul class="UFIList" data-reactid=".l">
               <li class="UFIRow  UFIComponent UFIAddComment UFIAddCommentWithPhotoAttacher UFIFirstComponent UFILastComponent" data-ft="{"tn":"["}" data-reactid=".l.1:4">
               <div class="clearfix UFIMentionsInputWrap" data-reactid=".l.1:4.0">
                  <div class="_ohe lfloat" data-reactid=".l.1:4.0.$left">
                     <div class="img _8o _8r UFIImageBlockImage UFIReplyActorPhotoWrapper" data-reactid=".l.1:4.0.$left.0"><img class="img UFIActorImage _54ru" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/t1.0-1/c5.5.64.64/s32x32/1010859_539620286074795_1558724572_t.jpg" alt="Adnan Ahmad Siddqi" data-reactid=".l.1:4.0.$left.0.0"></div>
                  </div>
                  <div class="" data-reactid=".l.1:4.0.$right">
                     <div class="UFIImageBlockContent _42ef _8u" data-reactid=".l.1:4.0.$right.0">
                        <div class="UFICommentContainer" data-reactid=".l.1:4.0.$right.0.0">
                           <div class="UFIInputContainer" data-reactid=".l.1:4.0.$right.0.0.0">
                              <div class="uiMentionsInput textBoxContainer ReactLegacyMentionsInput" data-reactid=".l.1:4.0.$right.0.0.0.0">
                                 <div class="highlighter" data-reactid=".l.1:4.0.$right.0.0.0.0.0">
                                    <div data-reactid=".l.1:4.0.$right.0.0.0.0.0.0"><span class="highlighterContent hidden_elem" data-reactid=".l.1:4.0.$right.0.0.0.0.0.0.0"></span></div>
                                 </div>
                                 <div class="uiTypeahead mentionsTypeahead" data-reactid=".l.1:4.0.$right.0.0.0.0.1">
                                    <div class="wrap" data-reactid=".l.1:4.0.$right.0.0.0.0.1.0">
                                       <input type="hidden" autocomplete="off" class="hiddenInput" data-reactid=".l.1:4.0.$right.0.0.0.0.1.0.0">
                                       <div class="innerWrap" data-reactid=".l.1:4.0.$right.0.0.0.0.1.0.1"><textarea name="add_comment_text" class="textInput mentionsTextarea uiTextareaAutogrow uiTextareaNoResize UFIAddCommentInput DOMControl_placeholder" title="Write a comment..." placeholder="Write a comment..." value="Write a comment..." data-reactid=".l.1:4.0.$right.0.0.0.0.1.0.1.0">Write a comment...</textarea></div>
                                    </div>
                                 </div>
                                 <input type="hidden" autocomplete="off" class="mentionsHidden" value="" data-reactid=".l.1:4.0.$right.0.0.0.0.2">
                              </div>
                              <div class="UFICommentAttachmentButtons clearfix" data-reactid=".l.1:4.0.$right.0.0.0.1">
                                 <div class="UFIPhotoAttachLinkWrapper _m" data-hover="tooltip" data-tooltip-alignh="center" aria-label="Attach a Photo" data-reactid=".l.1:4.0.$right.0.0.0.1.0"><i class="UFICommentPhotoIcon" data-reactid=".l.1:4.0.$right.0.0.0.1.0.0"><input type="file" accept="image/*" class="_n" name="file" title="Choose a file to upload" aria-label="Choose a file to upload"></i></div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               </li>
            </ul>
         </div>
      </div>
      </form>
   </div>
   <div class="_5ce">
      <div class="_5m- lfloat"><i class="_5n0"></i></div>
      <div class="_6a uiPopover _5d68" id="u_jsonp_2_4"><a class="_dxs _p" aria-label="Options for this story" href="#" aria-haspopup="true" aria-expanded="false" rel="toggle" role="button" id="u_jsonp_2_5"></a></div>
   </div>
</div>
</div>

我的问题是，通过使用jQuery，我可以通过引用类 timelineUnitContainer 直接访问以下html吗？

<div class="userContentWrapper">
                <div class="_wk"><span data-ft="{"tn":"K"}" class="userContent">This is my lovely Content.</span></div>
             </div>

Answer 1

您不太清楚自己要问的是什么，但如果您的目标是使用div访问userContentWrapper，那么您就不需要{{1任何事情：

timelineUnitContainer

只查找该类的所有var divs = $("div.userContentWrapper"); // Or just ".userContentWrapper" 元素。 （或者，如果你放弃div部分，那就是该类的所有类型的所有元素。）

如果仅查看div中的内容非常重要，那么：

timelineUnitContainer

（或者，如果它不重要，你可以再次离开var divs = $(".timelineUnitContainer div.userContentWrapper"); 。）这只是里面的那些（＆＃34;＆＃的后代） 34;）具有类div的元素。