他の子要素に含まれない子要素を取得する

Question

特定の要素の子要素ではない要素を取り出す方法が必要です。これらの「親」要素を区別するために、私はデータ属性を使用しています。

これは私の次のHTML stuctureの例である：

<form method="post" data-component-id="3"> 
<table border="0"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Date of Birth (dd/mm/yyyy)</th> 
      <th>Sex</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr data-component-id="8"> 
      <td>Spouse</td> 
      <td><input name="txtFirstName_1" type="text" maxlength="255" id="txtFirstName_1" data-mapping-id="Person.Firstname"></td> 
      <td><input name="txtLastName_1" type="text" maxlength="255" id="txtLastName_1" data-mapping-id="Person.Lastname"></td> 
      <td><input name="txtDOB_1" type="text" maxlength="10" id="txtDOB_1" data-mapping-id="Person.Birthday"></td> 
      <td> 
       <select name="ddlSex_1" id="ddlSex_1" data-mapping-id="Person.Sex"> 
        <option value=""></option> 
        <option value="Male">Male</option> 
        <option value="Female">Female</option> 
       </select> 
      </td> 
     </tr> 
     <tr data-component-id="9"> 
      <td>Child</td> 
      <td><input name="txtFirstName_2" type="text" maxlength="255" id="txtFirstName_2" data-mapping-id="Person.Firstname"></td> 
      <td><input name="txtLastName_2" type="text" maxlength="255" id="txtLastName_2" data-mapping-id="Person.Lastname"></td> 
      <td><input name="txtDOB_2" type="text" maxlength="10" id="txtDOB_2" data-mapping-id="Person.Birthday"></td> 
      <td> 
       <select name="ddlSex_2" id="ddlSex_2" data-mapping-id="Person.Sex"> 
        <option value=""></option> 
        <option value="Male">Male</option> 
        <option value="Female">Female</option> 
       </select> 
      </td> 
     </tr> 
     <tr data-component-id="9"> 
      <td>Child</td> 
      <td><input name="txtFirstName_3" type="text" maxlength="255" id="txtFirstName_3" data-mapping-id="Person.Firstname"></td> 
      <td><input name="txtLastName_3" type="text" maxlength="255" id="txtLastName_3" data-mapping-id="Person.Lastname"></td> 
      <td><input name="txtDOB_3" type="text" maxlength="10" id="txtDOB_3" data-mapping-id="Person.Birthday"></td> 
      <td> 
       <select name="ddlSex_3" id="ddlSex_3" data-mapping-id="Person.Sex"> 
        <option value=""></option> 
        <option value="Male">Male</option> 
        <option value="Female">Female</option> 
       </select> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<input type="button" name="submit" value="SUBMIT"> 

注：私はマッピング目的のタイプとして、この属性を扱うため、2つのdata-component-id="9"属性が存在している理由は、私のバックエンド。 （8 =配偶者データ、9 =子データ）

私は1つの要素を受け入れ、再帰IDを保持Componentオブジェクト、そのフィールド、及びサブコンポーネント（再帰的）のアレイを構築するJavaScript関数を作成しました。

// Component Object 
function Component(componentID, fields, subComponents) { 
    this.ComponentID = componentID; // Numeric 
    this.Fields = fields; // Array 
    this.Components = subComponents; // Array 
} 

// Recursively build component (and sub-components) 
$.fn.formDataToComponent = function() { 
    var componentID = $(this).attr("data-component-id"); 
    var componentName = ""; 
    var fields=[]; 
    var subComponents=[]; 
    var subComponentsIndex=0; 

    // Recursively create the sub components 
    $(this).find("[data-component-id]").each(function(oSubComponent){ 
     subComponents[subComponentsIndex] = $(oSubComponent).formDataToComponent(); 
     subComponentsIndex++; 
    }); 

    $(this).find('[data-mapping-id]').each(function() { 
     // $(this).find('[data-mapping-id]') will retrieve all elements with the data attribute (therefore 12 elements will be selected) 
     // With the list of these elements, I want to select ONLY those which are closest to the parent element with the attribute "data-component-id". 
     // Therefore in this particular scenario I only want to select the 4 elements of each "tr" element with each recursive call. 
     // I need to do so in a way that is dynamic and is based on the data attribute as I'll be using this with various forms. 
    }); 

    return new Component(componentID, componentName, fields, subComponents); 
} 

私はjQueryので.not()機能を使用して見てきたが、私は、これは私はそれがないと思いますどのように動作するとは思いません。私は解決策を探し続けるつもりですが、誰かが簡単で効率的なやり方を知っていれば、私は本当に助けに感謝します！

あなたの問題を解決するためのソリューション

、ここではjQueryの.filter機能をチェック：http://api.jquery.com/filter/

// Get list of sub components 
var subComponentArray = $(this).find("[data-component-id]"); 

// Get all fields that are not within the sub components 
$(this).find('[data-mapping-id]').filter(function(){ 
    return $(this).closest(subComponentArray).length === 0;}).each(function(index) { 
     // DO STUFF 
    }); 

Answer 1

をフィルタ処理しようとしているものをクリアし、ここではjQueryの.filter機能をチェックしてください。

http://api.jquery.com/filter/

と、このような何か：

$(this).find('[data-mapping-id]').filter(function(){ 
    return $(this).closest("[parent selector you don't want]").length === 0; 
}).each(function() { .... }); 

Answer 2

はnot()を使用することができるかもしれません。あなただけが行うことができますChild内部にネストされたFieldを望んでいた場合の例として、あなたのルート、子供とフィールドタグの使用：

$('Field').not("Root > Field'); 

これはそれがないRoot

の直接の子だったいかなるFieldを除外しますあなたはあなたの問題を解決するために、正確に