Question

我有一个表单，该表单是用户要填写的字段列表。有点像这样：

public MyAdapter(Context context, List<ListItems> values) {

    super(context, R.layout.list_item, values);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    View v = convertView;
    LayoutInflater inflater = LayoutInflater.from(getContext());

    if( v == null){
        v = inflater.inflate(R.layout.list_item, parent, false);
    }

    ListItems currLoc = LocationList.get(position);

    TextView theTextView = (TextView) v.findViewById(R.id.list_item_textview);
    theTextView.setText(currLoc.getLocation());

    TextView theTextView2 = (TextView) v.findViewById(R.id.list_item_textviewP);
    theTextView2.setText(currLoc.getProfile());

    ImageView theImageView = (ImageView) v.findViewById(R.id.imageview1);
    Toast.makeText(getActivity(), "image view="+theImageView, Toast.LENGTH_SHORT).show();
    theImageView.setImageResource(R.drawable.bullet);


    Switch mySwitch=(Switch) v.findViewById(R.id.onoff);
    Toast.makeText(getActivity(), ""+mySwitch, Toast.LENGTH_SHORT).show();


    return v;
}

当更改<form> <ol>  <li> <select name="Industry"> <option value="1">Airlines</option> <option value="2">Automotive</option> <option value="3">Retail</option> </select> </li> <li> <select name="Function"> <option value="1">Sales</option> <option value="2">Accounting</option> <option value="3">Consulting</option> </select> </li>  <li><input type="text" name="ContextAwareInput1" /></li> <li><select name="ContextAwareSelect"> <option value="1">Something</option> <option value="2">Anything</option> <option value="3">Nothing</option> </select> </li> <li><input type="text" name="ContextAwareInput2" /></li>  <li><input type="text" name="Website" /></li> <li><input type="text" name="Description" /></li> <li><input type="text" name="StartingDate" /></li> </ol> </form>选择选项时，JQuery将询问服务器应向用户显示哪些HTML内容。我需要删除所有contextaware元素，并用从服务器返回的HTML替换它们。在实际代码中，他们没有任何东西可以将它们区分为上下文感知元素。

我考虑将它们包装在Industry中，以便我可以将其定位为要更新的元素，例如<div id="ContextAwareArea">，但我在$('#ContextAwareArea').html(result)元素（无效标记）中不能有div。

这是针对我需要更新的区域的最佳方式吗？我真的只是想找到一个聪明的方法来挂钩那个部分的DOM并更新HTML。有没有更简单的方法呢？

Answer 1

只需为contextAware元素提供一个类，即可将其删除。添加另一个用于插入点的ID

<li class="contextAware"><input type="text" name="ContextAwareInput1" /></li>
<!-- other contextAware <li>'s -->

<li id="afterContextAware"><input type="text" name="Website" /></li>

JS

$.get(url, function(response){
   $('.contextAware').remove();
   $('#afterContextAware').before(response);
});

然后从服务器返回新的<li>

Answer 2

您可以使用CSS counter-increment和counter-reset属性来实现此目的。使用它进行一些有点棘手的编码将使您能够继续计数器，即使列表嵌套在不同的容器中也是如此。例如，我有一个像下面这样的HTML;

  <p>List 1</p>
  <ol class="start">
    <li>abcd</li>
    <li>efgh</li>
  </ol>
  <p>List 2</p>
  <ol class="continue">
    <li>ijkl</li>
  </ol>
  <p>List 3</p>
  <ol class="continue">
    <li>mnop</li>
  </ol>

默认情况下，这会创建一个类似;

的列表

List 1

    1. abcd
    2. efgh

List 2

    1. ijkl

List 3

    1. mnop

但是如果我应用下面的css代码;

ol li { 
    counter-increment: mycounter; 
}
ol.start { 
    counter-reset: mycounter; 
}
ol li { 
    counter-increment: mycounter;
    list-style-type: none;
}
ol li:before { 
    content: counter(mycounter) ". "; 
}

列表现在看起来像;

List 1

    1. abcd
    2. efgh

List 2

    3. ijkl

List 3

    4. mnop

这是一个现场演示https://jsfiddle.net/blasteralfred/jkgkrk4t/

现在你可以在两者之间使用容器了。不要担心列表中断。希望这会有所帮助。

如何使用JQuery Ajax定位列表中的区域？

2 个答案: