jQuery - 在代码行之前查找某个元素

时间:2016-07-03 18:39:45

标签: javascript jquery html

我遇到了关于如何查找特定元素的问题(例如here)的不同解决方案,但它似乎并不直接适用于我。

我要做的是使用jQuery来查找存在于单击的元素上方的特定标记以激活该功能。计划是从中检索文本。

这是我的代码。

$(".fixture-deletion-text, .fixture-deletion-logo").on('click', function() {
  //$(this).prev("h3").text()
  //$("#me").closest("h3 + div").prev().find('span b')
  console.log($(this).closest(".row").prev().find("h3").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="small-12 medium-4 columns">
    <h3>Fixture #1</h3>
  </div>
</div>
<div class="row">
  <div class="small-12 medium-4 columns">
    <label>Date and Time
      <input readonly type="text" class="span2 dpt" name="match-dt[]" value="02-12-1989 12:05">
    </label>
  </div>
  <div class="small-12 medium-3 columns">
    <label>Team
      <select name="team-division[]">
        <option value="team-1">1st Team</option>
        <option value="team-2">2nd Team</option>
      </select>
      <div class="error-box"></div>
    </label>
  </div>
  <div class="small-12 medium-3 columns">
    <label>Competition
      <input id="competition-input" name="competition[]" type="text" />
      <div id="competition-error" class="error-box"></div>
    </label>
  </div>
  <div class="small-12 medium-2 columns">
    <label>Home/Away
      <select name="location[]">
        <option value="home">Home</option>
        <option value="away">Away</option>
      </select>
      <div class="error-box"></div>
    </label>
  </div>
</div>
<div class="row">
  <div class="small-12 medium-6 columns">
    <label>Opponents
      <input id="opposition-input" name="opposition[]" type="text" />
      <div id="opposition-error" class="error-box"></div>
    </label>
  </div>
  <div class="small-12 medium-6 columns">
    <label>Venue
      <input id="venue-input" name="venue[]" type="text" />
      <div id="venue-error" class="error-box"></div>
    </label>
  </div>
</div>
<div class="test"></div>
<div class="row">
  <div class="small-12 columns end">
    <img src="images/delete-icon.png" class="fixture-deletion-logo float-right" />
    <a class="fixture-deletion-text float-right">Delete Fixture</a>
  </div>

  <div class="row">
    <div class="small-12 medium-4 columns">
      <h3>Fixture #1</h3>
    </div>
  </div>
  <div class="row">
    <div class="small-12 medium-4 columns">
      <label>Date and Time
        <input readonly type="text" class="span2 dpt" name="match-dt[]" value="02-12-1989 12:05">
      </label>
    </div>
    <div class="small-12 medium-3 columns">
      <label>Team
        <select name="team-division[]">
          <option value="team-1">1st Team</option>
          <option value="team-2">2nd Team</option>
        </select>
        <div class="error-box"></div>
      </label>
    </div>
    <div class="small-12 medium-3 columns">
      <label>Competition
        <input id="competition-input" name="competition[]" type="text" />
        <div id="competition-error" class="error-box"></div>
      </label>
    </div>
    <div class="small-12 medium-2 columns">
      <label>Home/Away
        <select name="location[]">
          <option value="home">Home</option>
          <option value="away">Away</option>
        </select>
        <div class="error-box"></div>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="small-12 medium-6 columns">
      <label>Opponents
        <input id="opposition-input" name="opposition[]" type="text" />
        <div id="opposition-error" class="error-box"></div>
      </label>
    </div>
    <div class="small-12 medium-6 columns">
      <label>Venue
        <input id="venue-input" name="venue[]" type="text" />
        <div id="venue-error" class="error-box"></div>
      </label>
    </div>
  </div>
  <div class="test"></div>
  <div class="row">
    <div class="small-12 columns end">
      <img src="images/delete-icon.png" class="fixture-deletion-logo float-right" />
      <a class="fixture-deletion-text float-right">Delete Fixture</a>
    </div>
    <div class="row">
      <div class="small-12 medium-4 columns">
        <h3>Fixture #1</h3>
      </div>
    </div>
    <div class="row">
      <div class="small-12 medium-4 columns">
        <label>Date and Time
          <input readonly type="text" class="span2 dpt" name="match-dt[]" value="02-12-1989 12:05">
        </label>
      </div>
      <div class="small-12 medium-3 columns">
        <label>Team
          <select name="team-division[]">
            <option value="team-1">1st Team</option>
            <option value="team-2">2nd Team</option>
          </select>
          <div class="error-box"></div>
        </label>
      </div>
      <div class="small-12 medium-3 columns">
        <label>Competition
          <input id="competition-input" name="competition[]" type="text" />
          <div id="competition-error" class="error-box"></div>
        </label>
      </div>
      <div class="small-12 medium-2 columns">
        <label>Home/Away
          <select name="location[]">
            <option value="home">Home</option>
            <option value="away">Away</option>
          </select>
          <div class="error-box"></div>
        </label>
      </div>
    </div>
    <div class="row">
      <div class="small-12 medium-6 columns">
        <label>Opponents
          <input id="opposition-input" name="opposition[]" type="text" />
          <div id="opposition-error" class="error-box"></div>
        </label>
      </div>
      <div class="small-12 medium-6 columns">
        <label>Venue
          <input id="venue-input" name="venue[]" type="text" />
          <div id="venue-error" class="error-box"></div>
        </label>
      </div>
    </div>
    <div class="test"></div>
    <div class="row">
      <div class="small-12 columns end">
        <img src="images/delete-icon.png" class="fixture-deletion-logo float-right" />
        <a class="fixture-deletion-text float-right">Delete Fixture</a>
      </div>

我将jQuery示例基于上面的链接,但它不起作用。它是这样的:如果用户点击 fixture-deletion-text / fixture-deletion-logo ,代码会找到下一个 元素点击元素。从那里,我可以弄清楚如何删除特定的夹具。

1 个答案:

答案 0 :(得分:4)

您可以尝试将div元素作为整个块的父元素:

<div class="fixture">
    <!--fixture code-->
</div>

然后用jquery使用选择器来获得最近的fixture元素:

$(document).ready(function() {
    $(".fixture-deletion-text, .fixture-deletion-logo").on('click', function() {
        $(this).closest(".fixture").remove();
    });
});

Here你有一个有效的例子