javascript - 检索不在其他子元素内的子元素

Question

我需要一种方法来检索给定元素的元素，这些元素不是某些其他元素的子元素。为了区分这些“父”元素，我一直在使用数据属性。

这是我的以下 HTML 结构的示例:

<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">

注意:之所以有两个 data-component-id="9" 属性是因为我对待这个属性作为我后端中用于映射目的的类型。 (8 = 配偶数据，9 = 子女数据)

我创建了一个 JavaScript 函数，它接受一个元素并递归地构建一个 Component 对象，其中包含一个 ID、其字段数组和子组件(递归)。

// 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() 函数，但我认为这并不像我想象的那样有效。我将继续寻找解决方案，但如果有人知道一种简单/有效的方法，我将非常感谢您的帮助!

解决方案

For a solution to your problem, check jQuery's .filter function here: 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() { .... });