javascript - jQuery - 在代码行之前查找特定元素

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 7 年前。

Improve this question

我遇到了关于如何查找特定元素的问题的不同解决方案(例如 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，代码将找到该特定上方的下一个元素单击的元素。从那里，我可以弄清楚如何删除该特定装置。

Answer 1

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

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

然后使用 jquery 使用最接近的固定元素的选择器:

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

Here你有一个工作示例