标签: jquery-traversing

有没有办法轻松做nextUntil,以便包含选择器匹配的元素？我有这个,如果有一个以前的兄弟,这是很好的:

$("#content").find("h3:first").prev().nextUntil("ul:last").wrapAll("<div id='collapse'></div>");

我需要介于.closest()和之间的功能.parents().我将一些CSS应用于某个元素的所有父母,直到某个父母.现在我正在while循环,但似乎有更好的方法来做到这一点.

var goUp = $(".distant-child");
while(!goUp.hasClass("ancestor-to-stop-at")){
    goUp.css("height","100%");
    goUp = goUp.parent();
}

我宁愿做其中一件事:

$(".distant-child").closest(".ancestor-to-stop-at").css("height","100%"); //won't work because .closest() only returns the top ancestor
$(".distant-child").parents(".ancestor-to-stop-at").css("height","100%"); //won't work because .parents() doesn't take this parameter and won't stop at the specified element.

如何在没有while循环的情况下实现这一目标？

我有这4个HTML代码段:

• 兄弟姐妹:

  <div class="a">...</div>
  <div class="b">...</div>        <!--selected-->
  <div class="b">...</div>        <!--not selected-->
  

  Run Code Online (Sandbox Code Playgroud)

• 包裹1:

  <div class="a">...</div>
  <div>
      <div class="b">...</div>    <!--selected-->
  </div>
  <div class="b">...</div>        <!--not selected-->
  

  Run Code Online (Sandbox Code Playgroud)

• 包裹2:

  <div>
      <div class="a">...</div>
  </div>
  <div>
      <div class="b">...</div>    <!--selected-->
  </div>
  <div class="b">...</div>        <!--not selected-->
  

  Run Code Online (Sandbox Code Playgroud)

• 分居:

  <div class="a">...</div>
  <div>...</div>
  <div class="b">...</div>        <!--selected-->
  <div>...</div>
  <div class="b">...</div>        <!--not selected-->
  <div>...</div>
  <div class="b">...</div>        <!--not selected-->
  

  Run Code Online (Sandbox Code Playgroud)

我怎样才能使用jQuery .b为任何给定.a元素选择下一个元素,而不管嵌套？

我想要这样的东西:

$('.a').each(function() {
    var nearestB = $(this)./*Something epically wonderful here*/;

    //do other stuff here
});

我有一个简单的js脚本,它计算无序列表所具有的子节点数.我正在尝试更改脚本,因此它不会计算包含类"hiddenItem"的div的任何子项(li).这是列表和js.

    <ul id="dlist" class="sortable">
        <li id="listItem_000002">
            <div>
                <div><a class="itemCollapse"></a>
                </div>Item 2</div>
        </li>
        <li id="listItem_000003">
            <div>
                <div><a class="itemCollapse"></a>
                </div>Item 3</div>
        </li>
        <li id="listItem_000009">
            <div>
                <div><a class="itemCollapse"></a>
                </div>Item 9</div>
        </li>
        <li id="listItem_000012">
            <div class="hiddenItem">
                <div><a class="itemCollapse"></a>
                </div>Item 12 (Hidden)</div>
        </li>
    </ul>
    <br>
    <br>

    <a class="count">Count</a>

.

    $(".count").click(function () {
        var tcount = $("#dlist").children("li").length;
        alert(tcount);
    });

在此示例中,js警告有4个项目.但是,我正在尝试更改代码,因此它会警告3个项目,因为最后一个列表项包含具有类"hiddenItem"的div.我试过使用.filter()以及其他一些横向方法而没有运气.谁有更好的主意？

这是一个工作小提琴:http://jsfiddle.net/YeDdq/1/

任何帮助,将不胜感激.谢谢!

这是我的HTML:

<div id="my_box_one" class="head-div">
   <div>
       <div class="some_box">a</div>
       <div class="some_box">b</div>
    </div>
</div>

我想使用该div的类(".head-div")获取父div("#my_box_one")的ID

$(document).ready(function(){

$(".some_box").click(function(){
   var abc = $(this).parentsUntil(".head-div").attr("id");
   // also tried $(this).parent(".head-div") -- same effect
   alert(abc); // Shows as Undefined
});   

});

我可以做以下事情,它会工作正常,但它似乎不对.

var abc = $(this).parent("div").parent("div").attr("id");

我正在禁用基于复选框的表单...

我在添加disabled属性时遇到问题.

这是我到目前为止所得到的:HTML:

<table id="shipInfoTable">
  <tr>
   <td>Name:</td>
   <td><input type="text" name="name" /></td>
  </tr>
  ...
</table>

Javascript选择器/属性操作(jquery):

$("#shipInfoTable tbody tr td input").each(function(index, item){
    item.attr("disabled", true);
});

Chrome Dev Console错误: Uncaught TypeError: Object #<an HTMLInputElement> has no method 'attr'

当我提醒了item的内.each()它提醒[object HTMLInputElement]

不太确定如何正确选择输入元素.我究竟做错了什么？

假设我有一个存储在名为obj的变量中的jQuery对象/集合,该变量应该包含一个名为target的id的DOM元素.

我事先不知道目标将是一个孩子的OBJ,即:

obj = $('<div id="parent"><div id="target"></div></div>');

或者如果obj 等于 目标,即:

obj = $('<div id="target"></div>');

或者如果target是obj中的顶级元素,即:

obj = $('<div id="target"/><span id="other"/>');

我需要一种从obj中选择目标的方法,但我不知道何时使用.find以及何时使用.filter.

从obj中提取目标的最快和/或最简洁的方法是什么？

我想出的是:

var $target = obj.find("#target").add(obj.filter("#target"));

更新 我正在为JSPERF测试页添加解决方案,以查看哪一个是最好的.目前我的解决方案仍然是最快的.这是链接,请运行测试,以便我们有更多数据:

http://jsperf.com/jquery-selecting-objects

jQuery代码:

$(document).ready(function() {
  $('#s-results').load('get_report1.php').show();
  $('#search-btn').click(function(){ showValues(); });
  $(function() {
    $('form').bind('submit', function() { showValues(); return false; });
  });

  function showValues() { 
    $.post('get_report1.php', { name: form.name.value }, 
      function(result) {
        $('#s-results').html(result).show();
      }
    ); 
  }
});

HTML:

<form name = "form">
   <div>Enter name</div>
     <input type="text" name="name" id="fn" />
     <input type="submit" value="Search" id="search-btn" />
   <div>
      <input type="text" id="se2" name="search22">
   </div>
</form>
<div id = "s-results" style="height:50px;">
</div>

到目前为止,脚本运行完美.现在我只想再次从上面的函数中过滤返回的HTML.

为了实现这一点,我尝试了这行代码:

$(result).filter('#se2');

在带result参数的函数下,但它不起作用.

那么如何过滤返回的HTML代码呢？

我有一些使用jQuery选择器选择的元素.它是来自具有相同类('my-elements')的元素列表的元素.现在我想选择包含上面几级的选定元素的元素.我怎样才能做到这一点 ？

<div class="vote>
(... several levels)
<div class="my_element"></div>
</div>

选择器:

var elements = $('.my_element');
var element = elements[0];

之前我在一个条件中检查了一行是否是这样的表中的最后一行:

$row.is(':last-child')

哪个工作正常.

现在,我有一个要求,其中表中的某些行被隐藏 - 现在我必须检查特定行是否是表中的最后一个可见行.

我试过这个:

$row.is(':visible:last-child')

但不是那么成功.有人有线索吗？