0

以下是HTML

<div id="serverList" class="content">
    <div class="boxtitle">
    </div>
    <div id='serverInfo1' class="formEl_b">
        <fieldset>
            <legend>Server #1</legend>
            <div class="section">
                <label>
                    Server Description<small>Linux</small></label>
                <div>
                    <input type="text" id="serverDescription" class="serverDescription medium" /><span class="f_help"></span></div>
            </div>
            <div class="section">
                <label>
                    Server HostName<small>SRV_FR_TERT</small></label>
                <div>
                    <input type="text" id="serverHostName" class="serverHostName medium" /><span class="f_help"></span></div>
            </div>
        </fieldset>
    </div>
    <div id='serverInfo2' class="formEl_b">
        <fieldset>
            <legend>Server #2</legend>
            <div class="section">
                <label>
                    Server Description<small>Windows 2003</small></label>
                <div>
                    <input type="text" id="serverDescription" class="serverDescription medium" /><span class="f_help"></span></div>
            </div>
            <div class="section">
                <label>
                    Server HostName<small>SRV_EQ_SFGT</small></label>
                <div>
                    <input type="text" id="serverHostName" class="serverHostName medium" /><span class="f_help"></span></div>
            </div>
        </fieldset>
    </div>
    <div id='serverInfo3' class="formEl_b">
        <fieldset>
            <legend>Server #3</legend>
            <div class="section">
                <label>
                    Server Description<small>iOS</small></label>
                <div>
                    <input type="text" id="serverDescription" class="serverDescription medium" /><span class="f_help"></span></div>
            </div>
            <div class="section">
                <label>
                    Server HostName<small>SRV_WR_RQRT</small></label>
                <div>
                    <input type="text" id="serverHostName" class="serverHostName medium" /><span class="f_help"></span></div>
            </div>
        </fieldset>
    </div>
</div>

我正在尝试使用 JQuery 迭代上面的 htmldescription并hostname为每个服务器打印

$("#serverList").children(".formEl_b").each(function () {

      // this is what i am trying to get with no success:
      var description = $(".formEl_b .serverDescription").val();
      var hostname = $(".formEl_b .serverHostName").val();

      alert(description);
      alert(hostname);

});

我遇到的问题是它总是打印第一个description，hostname甚至有 3 个此类项目。

4

2 回答 2

3

你的选择器

$(".formEl_b .serverDescription")

正在查找所有具有该类的元素，这些元素.serverDescription作为 DOM 的后代出现在 DOM 中的任何位置.formEl_b，但是由于您已经在循环父元素，因此您可以使用以下内容：

$("#serverList").children(".formEl_b").each(function () {
      var description = $(this).find(".serverDescription").val();
      var hostname = $(this).find(".serverHostName").val();
      alert(description);
      alert(hostname);
});

将您的选择器替换为仅搜索循环find()内当前元素的后代each

find()比使用带有上下文的选择器快$(".serverDescription", this)一点（即）

于 2012-11-19T12:22:18.550 回答
1

在里面.each()，this用来指代当前迭代的元素。

所以：

$("#serverList").children(".formEl_b").each(function () {

      var description = $(".serverDescription", this).val();
      var hostname = $(".serverHostName", this).val();

      alert(description);
      alert(hostname);

});

或等效地：

      var description = $(this).find(".serverDescription").val();
于 2012-11-19T12:22:36.473 回答