Question

今天出现了一个小问题。

我正在使用JQuery解析XML文件。它包含一个名为<property>的项目的树，其中包含<option>个元素。他们定义下拉菜单。这是一个例子：

<property>
    <option>
        <text>option 1</text>
    </option>
    <option>
        <text>option 2</text>
    </option>
    <option>
        <text>option 3</text>
    </option>
</property>

解析起来非常简单，但有时另一个<property>嵌套在<option>中，因为它定义了一个子菜单，只有在选择了给定选项时才会出现：

<property>
    <option>
        <text>option 1</text>
    </option>
    <option>
        <text>option 2</text>
        <property>
            <option>
                <text>suboption 1</t
            </option>
            <option>
                <text>suboption 2</text>
            </option>
        </property>
    </option>
    <option>
        <text>option 3</text>
    </option>
</property>

这些嵌套的<property>元素可能包含更多<property>个元素，依此类推。基本上它是一种树状结构。

问题是如何使用jQuery仅从给定级别收集<option>元素。如果我这样做......

$(xml).find('property').each(function () {
    var selector = $('<select></select>', {'id': $(this).attr('id')});
    $(this).find('option').each(function () {
        $(selector).append($('<option></option>', {'text': $(this).find('text').text()}));
    });
    $('#controls').append(selector);
});

...它将从当前级别和所有较低级别收集所有<option>个元素。由于我将当前级别称为$(this)，因此我不知道如何告诉JQuery仅从当前级别（$(this)的级别）收集它们并单独留下较低级别。有人可以在我的jQuery知识中修复这个差距吗？感谢。

Answer 1

编辑：我意识到我的评论看起来更像是回答。哎呦。：）

考虑使用jQuery的.children()方法替代.find()。这样你就只能穿越直系后代。

function generateSelectElementFromXml(xml) {
  var selector = $('<select></select>', {'id': $(this).attr('id')});
  $(xml).children('property').each(function () {
    $(this).children('option').each(function () {
        $(selector).append($('<option></option>', {
          'text': $(this).children('text').text()
        }
      ));
    });
  });
  return selector;
}

然后，您可以在控件<select>中生成<div>元素，如下所示：

$('#controls').append(generateSelectElementFromXml(xml));

以下是CodePen示例：http://codepen.io/anon/pen/NAYQAV

每个（）的JQuery选择器只迭代当前级别？

1 个答案: