jQuery可以給我一個按類名排除某些子標籤的子項列表嗎？

我正在編寫一個首先生成表單（C++代碼）的編輯器，然後將其自身連接到各種最終的HTML小部件（JavaScript代碼），以支持使用jQuery實現的許多高級特性。jQuery可以給我一個按類名排除某些子標籤的子項列表嗎？

此時，編輯器連接的表單表現良好，不能包含其他表單。但是，我有一個情況是可行的。所以......

有一個簡化版本生成的HTML的：

<div id="form1" class="snap-editor"> 
    <div class="snap-widget">...</div> 
    <div class="snap-widget">...</div> 
    <div class="snap-widget">...</div> 
    ... 
    <div class="snap-widget">...</div> 
</div> 

<div id="form2" class="snap-editor"> 
    <div class="snap-widget">...</div> 
    <div class="snap-widget">...</div> 
    <div class="snap-widget">...</div> 
    ... 
    <div class="snap-widget">...</div> 
</div>

在這種情況下，我可以很容易產生代表每種形式的JavaScript對象的列表。我用兩個級別的查詢，像這樣：

forms = jQuery(".snap-editor"); 
for(i = 0; i < forms.length; ++i) 
{ 
    widgets = forms[i].find(".snap-widget"); 
    for(j = 0; j < widgets.length; ++j) 
    { 
    w = widgets[j]; 
    ... // do stuff on the 'w' widget 
    } 
}

現在，我想知道是否有將使用類似的調用forms.find(".snap-widget")的方式，但也將排除任何'.snap-editor'子div標籤和他們的孩子？

將會有新類型的HTML的，我會用在這裏我們可以看到，窗口2裏面Form1中：

<div id="form1" class="snap-editor"> 
    <div class="snap-widget">...</div> 
    <div class="snap-widget">...</div> 
    <div class="snap-widget">...</div> 
    ... 
    <div class="snap-widget">...</div> 

    <!-- second form is now a sub-form in the tree --> 
    <div id="form2" class="snap-editor"> 
    <div class="snap-widget">...</div> 
    <div class="snap-widget">...</div> 
    <div class="snap-widget">...</div> 
     ... 
    <div class="snap-widget">...</div> 
    </div> 
</div>

當我以前的算法應用到這棵樹，我得到Form 1和Form的控件設置form1的時候......

警告另外要注意，這裏的例子顯示卡的小部件div標籤直接孩子，然而，在實際的形式，這是不是這樣的，所以使用jQuery(...).children()不一個選項，至少不是自己。

對於那些誰也破譯這樣，有一個更完整的（在現實）的形式與第一/最後一個名稱，地址，條款和條件......

<?xml version="1.0"?> 
<div class="body"> 
    <div session="6a1cf46e/922188938" class="editor-form" form_name="user_settings" id="content"> 
    <a class="settings-save-button" href="#">Save Changes</a> 
    <a class="settings-cancel-button right-aligned" href="https://csnap.m2osw.com/user/1">Cancel</a> 
    <div class="clear-both"/> 
    <div class="settings editing"> 
     <div class="required-fields"><span class="required">*</span> Required fields</div> 
     <fieldset> 
     <legend>Identity</legend> 
     <div class="logo-block"> 
      <div class="snap-editor editable image-box picture drop immediate" field_type="image-box" field_name="picture"> 
      <div class="snap-editor-background zordered"> 
       <div class="snap-editor-background-content">Drag &amp; Drop<br/>Your Photo<br/>Here</div> 
      </div> 
      <div max-sizes="2048x2048" title="Tooltip" class="editor-content image no-toolbar" min-sizes="64x64" name="picture" resize-sizes="150x150" tabindex="11"> 
       <img width="113" height="150" style="top: 0px; left: 18.5px; position: relative;" filename="Antikythera_model_front_panel_Mogi_Vicentini_2007-389x518.jpg" src="/user/1/photo.jpg"/> 
      </div> 
      <div class="editor-help image-box-help" style="display: none;">Help</div> 
      </div> 
      <div class="settings-title">Photo</div> 
     </div> 
     <div class="editor-block"> 
      <div class="settings-title"> 
      <label for="first_name" class="first_name">First Name <span class="required">*</span></label> 
      <label for="last_name" class="last_name">Last Name <span class="required">*</span></label> 
      <div class="clear-left"/> 
      </div> 
      <div> 
      <div class="snap-editor editable line-edit first_name immediate auto-focus" field_type="line-edit" field_name="first_name"> 
       <div class="snap-editor-background zordered"> 
       <div class="snap-editor-background-content">first name</div> 
       </div> 
       <div title="Tooltip" class="editor-content no-toolbar" maxlength="128" minlength="1" name="first_name" tabindex="6">Halk</div> 
       <div class="editor-help line-edit-help" style="display: none;">Help</div> 
      </div> 
      <div class="snap-editor editable line-edit last_name immediate" field_type="line-edit" field_name="last_name"> 
       <div class="snap-editor-background zordered"> 
       <div class="snap-editor-background-content">last name</div> 
       </div> 
       <div title="Tooltip" class="editor-content no-toolbar" maxlength="128" minlength="1" name="last_name" tabindex="7">First</div> 
       <div class="editor-help line-edit-help" style="display: none;">Help</div> 
      </div> 
      </div> 
     </div> 
     <div class="editor-block clear-left"> 
      <div class="settings-title"> 
      <label for="main_phone" class="main_phone">Phone Number <span class="required">*</span></label> 
      <label for="other_phone" class="other_phone">Other Phone</label> 
      <div class="clear-left"/> 
      </div> 
      <div> 
      <div class="snap-editor editable line-edit main_phone immediate" field_type="line-edit" field_name="main_phone"> 
       <div class="snap-editor-background zordered"> 
       <div class="snap-editor-background-content">business phone</div> 
       </div> 
       <div title="Tooltip" class="editor-content no-toolbar" maxlength="32" minlength="7" name="main_phone" tabindex="8">916 220 6482</div> 
       <div class="editor-help line-edit-help" style="display: none;">Help</div> 
      </div> 
      <div class="snap-editor editable line-edit other_phone immediate" field_type="line-edit" field_name="other_phone"> 
       <div class="snap-editor-background zordered"> 
       <div class="snap-editor-background-content">cell, home, or fax</div> 
       </div> 
       <div title="Tooltip" class="editor-content no-toolbar" maxlength="32" minlength="0" name="other_phone" tabindex="9"/> 
       <div class="editor-help line-edit-help" style="display: none;">Help</div> 
      </div> 
      </div> 
     </div> 
     <div class="editor-block clear-left"> 
      <div class="snap-editor editable checkmark read_terms_n_conditions immediate" field_type="checkmark" field_name="read_terms_n_conditions"> 
      <div title="Tooltip" class="editor-content no-toolbar" name="read_terms_n_conditions" tabindex="10"><div class="checkmark-flag"><div class="flag-box"/><div class="checkmark-area checked"/></div>I accept the <a target="_blank" href="/terms-and-conditions">Finball Inc. Terms and Conditions</a>.<span class="required">*</span></div> 
      <div class="editor-help checkmark-help" style="display: none;">Help</div> 
      </div> 
     </div> 
     </fieldset> 
     <fieldset> 
     <legend>Address</legend> 
     <div class="editor-block"> 
      <label for="address1" class="settings-title">Address</label> 
      <div class="snap-editor editable line-edit address1 immediate" field_type="line-edit" field_name="address1"> 
      <div class="snap-editor-background zordered"> 
       <div class="snap-editor-background-content">address line 1</div> 
      </div> 
      <div title="Tooltip" class="editor-content no-toolbar" maxlength="250" minlength="0" name="address1" tabindex="12"/> 
      <div class="editor-help line-edit-help" style="display: none;">Help</div> 
      </div> 
      <div class="snap-editor editable line-edit address2 immediate" field_type="line-edit" field_name="address2"> 
      <div class="snap-editor-background zordered"> 
       <div class="snap-editor-background-content">address line 2</div> 
      </div> 
      <div title="Tooltip" class="editor-content no-toolbar" maxlength="250" minlength="0" name="address2" tabindex="13"/> 
      <div class="editor-help line-edit-help" style="display: none;">Help</div> 
      </div> 
     </div> 
     <div class="editor-block"> 
      <div class="settings-title"> 
      <label for="city" class="city">City</label> 
      <label for="state" class="state">State</label> 
      <label for="zip" class="zip">Zip</label> 
      </div> 
      <div class="clear-left"> 
      <div class="snap-editor editable line-edit city immediate" field_type="line-edit" field_name="city"> 
       <div class="snap-editor-background zordered"> 
       <div class="snap-editor-background-content">city</div> 
       </div> 
       <div title="Tooltip" class="editor-content no-toolbar" maxlength="128" minlength="0" name="city" tabindex="14"/> 
       <div class="editor-help line-edit-help" style="display: none;">Help</div> 
      </div> 
      <div class="snap-editor editable line-edit state immediate" field_type="line-edit" field_name="state"> 
       <div class="snap-editor-background zordered"> 
       <div class="snap-editor-background-content">state</div> 
       </div> 
       <div title="Tooltip" class="editor-content no-toolbar" maxlength="128" minlength="0" name="state" tabindex="15"/> 
       <div class="editor-help line-edit-help" style="display: none;">Help</div> 
      </div> 
      <div class="snap-editor editable line-edit zip immediate" field_type="line-edit" field_name="zip"> 
       <div class="snap-editor-background zordered"> 
       <div class="snap-editor-background-content">zip</div> 
       </div> 
       <div title="Tooltip" class="editor-content no-toolbar" maxlength="32" minlength="0" name="zip" tabindex="16"/> 
       <div class="editor-help line-edit-help" style="display: none;">Help</div> 
      </div> 
      </div> 
     </div> 
     </fieldset> 
    </div> 
    </div> 
</div>

來源

2015-02-23 Alexis Wilke

嘛不具有真正的標記使得它很難回答，因爲上面用一個字'>' – epascarello 2015-02-23 03:44:43

這也許可以解釋爲什麼HTML規範不允許嵌套的理由回答'form'標籤。 – 2015-02-23 03:47:35

@ ArturoTorresSanchez，是啊...一般來說HTML/XML的限制之一。雖然我可以做到，但我想知道是否有辦法做到這一點，而不寫100行代碼......並保持它的速度。 – 2015-02-23 03:57:21

可以使用不選擇過濾後人：

var widgets = jQuery(forms[i]).find(".snap-widget").not(jQuery(forms[i]).find(".snap-editor .snap-widget"));

這一發現將只着眼於選擇的管理單元編輯器的後代，而不是選擇卡編輯器本身。因此，將選擇所選快照編輯器的後代中的任何快照 - 小部件 - 只要它們不是快速編輯器的子項並且也是所選元素的子項。

http://jsfiddle.net/2w4voug4/3/

http://api.jquery.com/not-selector/

來源

2015-02-23 03:48:09

這將是'：not（.snap-form） '因爲當我搜索窗口小部件時，我不想瀏覽子窗體*標籤*。但是我不認爲我可以在這種情況下使用'：not（）'。 – 2015-02-23 03:59:03

我已經更新了我的答案，以便更具體。這應該選擇不在外部快閃編輯器內另一個快速編輯器內的所有快照部件。 – 2015-02-23 04:04:55

好的，我試過了，也沒有用'：not（）'運算符運氣，並且在這種情況下也沒有工作。我也嘗試過'.not（）'函數過濾器，它也沒有工作。我敢肯定，原因是'not'在**之後被應用**它已經做出選擇，然後它檢查選擇的孩子是否匹配該選擇器......在我的情況下，我將不得不測試父代替。 – 2015-02-23 04:31:19

我知道你說的標記是不一樣的，但你可能需要使用direct child selector，並做出比單個類更具體的選擇器。

解決方案的示例代碼：

forms[i].find("> .snap-widget")

沒有真正的代碼就很難給你一個真正的解決方案。

來源

2015-02-23 03:42:42 epascarello

jQuery可以給我一個按類名排除某些子標籤的子項列表嗎？

回答

相關問題