Question

我有一个使用jQuery和Bootstrap的Web应用程序。 HTML看起来像这样：

<div id="container">
  <div class="row ui-row">
    <div class="col-md-12 ui-col" data-row="1" data-col="1">
      Test 1
    </div>
  </div>
  <div class="row ui-row">
    <div class="col-md-3 ui-col" data-row="3" data-col="1">
      Test 2
    </div>
    <div class="col-md-3 ui-col">
      <div class="design cmenu" data-id="86">
      </div>
    </div>
    <div class="col-md-3 ui-col" data-row="3" data-col="3">
      Test 3
    </div>
    <div class="col-md-3 my-col" data-row="3" data-col="4">
      Test 4
    </div>
  </div>
</div>
<script type="text/javascript">
  $(".ui-row")
    .mouseover(function () {
      console.log($(this));
    })
  ;
</script>

当用户将鼠标悬停在ui-row上时，我想通过jQuery抓取行中的最后一个ui-col。但是，我不知道该怎么做。有人可以赐教我吗？

Answer 1

您可以使用.find()查找后代元素，然后使用：last查找最后一个元素。您也可以使用mouseenter代替mouseover（否则，当您在ui-row内移动时，也会触发事件）

＆＃13;

$(".ui-row").mouseenter(function() {
  snippet.log($(this).find('.ui-col:last').text());
});

＆＃13;

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>


<div id="container">
  <div class="row ui-row">
    <div class="col-md-12 ui-col" data-row="1" data-col="1">
      Test 1
    </div>
  </div>
  <div class="row ui-row">
    <div class="col-md-3 ui-col" data-row="3" data-col="1">
      Test 2
    </div>
    <div class="col-md-3 ui-col">
      <div class="design cmenu" data-id="86">
      </div>
    </div>
    <div class="col-md-3 ui-col" data-row="3" data-col="3">
      Test 3
    </div>
    <div class="col-md-3 my-col" data-row="3" data-col="4">
      Test 4
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以使用 find() 来获取 .ui-col div，然后使用last()来获取最后一个方法

＆＃13;

$(".ui-row").mouseover(function() {
  console.log($(this).find('.ui-col').last().text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="row ui-row">
    <div class="col-md-12 ui-col" data-row="1" data-col="1">
      Test 1
    </div>
  </div>
  <div class="row ui-row">
    <div class="col-md-3 ui-col" data-row="3" data-col="1">
      Test 2
    </div>
    <div class="col-md-3 ui-col">
      <div class="design cmenu" data-id="86">
      </div>
    </div>
    <div class="col-md-3 ui-col" data-row="3" data-col="3">
      Test 3
    </div>
    <div class="col-md-3 my-col" data-row="3" data-col="4">
      Test 4
    </div>
  </div>
</div>
<script type="text/javascript">
</script>

＆＃13;

通过jQuery获取Bootstrap行中的最后一列

2 个答案: