Question

这是我的标记

<label class="ui_checkbox">
    MyCheckbox
    <input type="checkbox">
</label>

我正在编写一个jQuery插件，它将这个标准标记转换为一个漂亮的小部件，它应该将标题文本包装成一个span并生成以下标记：

如果标题文本留给复选框，则标记为：

<label class="ui_checkbox">
    <span class="caption left">MyCheckbox</span>
    <input type="checkbox">
    <span class="knob"></span>
</label>

如果选中复选框，则标记为：

<label class="ui_checkbox">        
    <input type="checkbox">
    <span class="knob"></span>
    <span class="caption right">MyCheckbox</span>
</label>

问题：在我的插件代码中，我如何确定ORIGINAL标记“MyCheckbox”中的标题是左侧还是右侧的复选框，以便放置跨度并设置其类？

Answer 1

利用.nextAll()和.prevAll()：

＆＃13;

$('.ui_checkbox').each(function(){
  console.log("If checkbox is the type of one of the " +
  "\nFollowing:" +
  $(this).find('.caption').nextAll().is(':checkbox') +
  "\nPreceding:" +
  $(this).find('.caption').prevAll().is(':checkbox'));
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="ui_checkbox">
    <span class="caption">MyCheckbox</span>
    <input type="checkbox">
    <span class="knob"></span>
</label>

<hr/>

<label class="ui_checkbox">
    <input type="checkbox">
    <span class="knob"></span>
    <span class="caption">MyCheckbox</span>
</label>

＆＃13;

Answer 2

您可以使用容器的.childNodes属性并检查第一个子节点是TextNode（可能是您的标签）还是输入元素。

理想情况下，您需要找出两个元素索引并进行比较：

public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
}

您可以将检查元素替换为最适合您插件的元素。

Answer 3

＆＃39;陷阱＆＃39;我发现这是围绕空/空白文本节点，您必须查看，但在确定文本或复选框是否是标签中的第一个子节点时，省略仅空白节点。 jQuery的.children()并没有加载文本节点，但.content()将包含只是空白的文本节点。

jsFiddle：https://jsfiddle.net/glogan/harsx930/

这是解码器响铃：

返回第一个非空白节点的.nodeType。文本（即左标签）为3，输入/对象标签为8（即右标签）。你也可以/而是检查.is(":checkbox")更具体而不仅仅是知道它是输入/对象标签。

// returns nodeType: Notable are:  3 is text  8 is tag like <input>
function getFirstNonWhitespaceChildObjType(obj) {
  // Get the list of objects in the label
  var itemType = null;
  $(obj).contents().each( function( index, innerObj ) {
     if (!itemType) {
        if (innerObj.nodeType===3 && innerObj.data.trim().length>0) {
            // string that is not whitespace;
          itemType = innerObj.nodeType;
          return;
        };
        if (innerObj.nodeType!==3) {
          itemType = innerObj.nodeType;
          return;
        };
     };
  });
  //
  // ?? Custom code here for left/right (3/8) labels
  //
  console.log("FIRST .nodeType is: " + itemType );
  return itemType;
};

以及浏览所有标签的功能：

jQuery(function($) {
   // get list of checkboxes and call manipulation function
   $( ".ui_checkbox" ).each( function( index, obj ) {
       console.log("label child is: "+index +" firstType: ",
                    getFirstNonWhitespaceChildObjType(obj) );
   }); 
})

如何在容器元素中找到文本位置？

3 个答案: