Question

li元素下有3 #myc个元素。

<div id="myc">
  <li>
    <div>http://www.example.com/?id=1</div>
  </li>
  <li>
    <div>http://www.example.com/?id=2</div>
  </li>
  <li>
    <div>http://www.example.com/?id=3</div>
  </li>
</div>

首先，我想在div内隐藏带有网址的文字。所以我用这个：

ff = jQuery("#myc li:nth-of-type(1) div:nth-child(7)"); // the url
ff.hide();

我使用div:nth-child(7)因为li中还有其他div元素，为了清楚起见，我在此不包含这些元素。

隐藏div元素后，我想让整个li可点击，其链接将是div元素内的相对网址。我用这个：

cc = jQuery("#myc li:nth-of-type(1)"); // the li
cc.css("cursor", "pointer");
cc.click(function(){
    window.location.href = ff.text();
    return false;
});

请注意我使用ff.text();，这意味着li的网址将是其div孩子的内容。

这很有效，但我在标记中看到的总共有3个元素。所以我创建了上述脚本的另外两个副本，并改变了它们的相对数字：

ff1 = jQuery("#myc li:nth-of-type(1) div:nth-child(7)"); // the url
ff1.hide();

ff2 = jQuery("#myc li:nth-of-type(2) div:nth-child(7)"); // the url
ff2.hide();

ff3 = jQuery("#myc li:nth-of-type(3) div:nth-child(7)"); // the url
ff3.hide();

我也对其他脚本做了同样的事情（使li可点击）。我不会出于后期尺寸的原因在这里显示该脚本。

如您所知，这对3 li的工作正常。但如果结果为50 li s怎么办？

有什么方法可以使用for或某种类型的循环来动态地将li:nth-of-type(1)更改为li:nth-of-type(x)，而x则表示像x ++这样的动态变量; ？

Answer 1

不是拉出每个ff元素，而是使用click()处理程序中的DOM遍历来查找与所点击的div相关的li，其中包含您想要的网址。这将允许您将单个事件处理程序应用于所有li / div实例。试试这个：

$("#myc li").click(function(e) {
  e.preventDefault();
  var url = $(this).find('div:nth-child(7)').text();
  window.location.href = url;
});

另请注意，cc.css("cursor", "pointer");和隐藏div元素应该在CSS中设置：

#myc li { cursor: pointer; }
#myc li div:nth-child(7) { display: none; }

这是一个有效的例子：

$("#myc li").click(function(e) {
  e.preventDefault();
  var url = $(this).find('div:nth-child(7)').text();
  //window.location.href = url;
  console.log('redirecting to: ' + url);
});

#myc li { cursor: pointer; }
#myc li div:nth-child(7) { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myc">
  <li>
    <span>Padding</span> <span>out</span> <span>some</span> <span>words</span> <span>for</span> <span>the index...</span>
    <div>http://www.example.com/?id=1</div>
  </li>
  <li>
    <span>Padding</span> <span>out</span> <span>some</span> <span>words</span> <span>for</span> <span>the index...</span>
    <div>http://www.example.com/?id=2</div>
  </li>
  <li>
    <span>Padding</span> <span>out</span> <span>some</span> <span>words</span> <span>for</span> <span>the index...</span>
    <div>http://www.example.com/?id=3</div>
  </li>
</div>

Answer 2

试试这个::

var length = jQuery("#myc li").length;
for (i = 0; i<length; i++) {
    var selector = "#myc li:nth-of-type("+i+") div:nth-child(7)";
    jQuery(selector).hide();
    var cc = "#myc li:nth-of-type("+i+")"; 
    jQuery(cc).css("cursor", "pointer");
    jQuery(cc).click(function(){
    window.location.href = jQuery(selector).text();
      return false;
    });
}

使用动态变量

2 个答案: